web中資料提交事件是常常發生的，但是大多數情況下我們不希望使用html中的form表單提交，因為form表單提交會中斷當前瀏覽器的操作並且會調到另一個地址（即使這個地址是當前頁面），並且會重複載入一些html浪費頻寬，我們希望達到一個無重新整理的、非同步的提交效果來給使用者更好的體驗，這時候就要使用ajax，ajax可以不依賴表單自行發起一次http請求並且取回伺服器響應的資料，這就是ajax的簡便之處。我們這裡使用JQuery中封裝好的ajax函式，更加簡便。下面列舉幾個使用ajax非同步提交資料的方法。

一：jquery.js中的$.ajax方法

此方法依賴jquery.js外掛，有很多版本，可以自己下載。

我們需要在此$.ajax方法中指定一些引數，比如請求地址、請求型別、所需要傳輸的資料、請求成功後需要執行的操作，這裡簡略說一下。

	$.ajax({
		url:"你的url地址",
		type:'post',
		data:{key:'value'},
		success:function(){
			alert('成功')；
		}
	})

這是$.ajax方法的簡單用法。其中引數data是你要傳輸的資料，這裡的data支援Json物件和字串。data資料如果是一個form表單裡面的，自己寫一個json很慢，可以使用jquery裡面的serizlize()方法。這個方法返回一個字串（每個form表單提交的時候也是轉化為相同格式的字串）。

	$.ajax({
		url:"你的url地址",
		type:'post',
		data:$('form').serialize(), // "id=asdasd&s=000&name=1233"
		success:function(){
			alert('成功')；
		}
	})

--------------------------------------------------------------------------------------------------------------------------

那麼，檔案也是這樣提交的嗎？

對於檔案的提交我們需要對$.ajax進行一些特殊的設定，並且使用FormData的物件。

      <input type="file" name="f" id="f" multiple>

        var fd = new FormData();
        fd.append("name", "bill");
        fd.append("photo", $('#f')[0].files[0]);
        fd.append("photo2", $('#f')[0].files[1]);
        $.ajax({
            url: '/webform1.aspx',
            type: 'post',
            processData: false,
            contentType: false,
            data: fd,
            success: function () {
                alert("ok")
            }
        })

我們建立一個fd物件並向其中新增鍵值對，這個值可以是一個檔案。$('#f')[0]是取出id=f的元素，至於為什麼是[0]，這是因為jquery物件都有一個預設為0的索引用來取出其Dom元素，$('f')是一個jquery物件，[0]為Dom元素 可以用dom的所有屬性和方法。然後使用files來取出檔案。這裡我使用了files[0]和files[1]，這是multiple可以上傳多個檔案我這裡上傳了兩個。

然後伺服器就可以接收檔案了，和表單一樣的接收方法。

當然可以把一個form直接轉化為一個FormData物件，這樣我們可以避免把所需內容一個個append到FormData裡面。

var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  // 不處理資料
  contentType: false   // 不設定內容型別
});

使用append新增時formdata的key若已存在，則不能重複新增，會忽略本次append操作，這在對於使用經常需要表單取出值是相當不利的，所以建議使用set方法來新增新的key-value值，set的意思是修改一個已經存在的鍵值對，如果不存在的話就建立一個。即

fd.set("CustomField", "This is some extra data");

$.ajax是主動事件，而我們希望當用戶點選按鈕才執行，這裡可以將$.ajax函式放在一個按鈕的click事件裡面，也可以使用下面的方法。

$('form').submit(function{
  // 你自己的程式碼，一般是資料合法性驗證
$.ajax({ 
     
   });
   return false;
})

submit函式可以在表單被提交時執行，我們可以用來將其作為執行$.ajax函式的觸發事件，然後使用return false來提前阻止這個表單的提交。

注意：有些文章裡說FormData的相容問題，FormData很早就提出來了。並且入股喲你想要使用jquery裡面的ajax來傳輸檔案就免不了使用它這是因為下面兩個方法也用到了FormData。當然原生的ajax有直接傳輸檔案的方法，感興趣的人可以看下。

二：jquery.form.js中的ajaxSubmit、ajaxForm方法。

這兩個依賴jquery.form.js外掛，可以自行下載。

上面的ajax可以自己來封裝資料，即使這個資料不在form表單裡面，但是這兩個方法都是對form表單的資料都來自form表單。ajaxSubmit類似於$.ajax直接將資料提交，為了延緩提交要寫在一個觸發事件裡面。而ajaxform相當於上面寫到的$('form').submit函式,是將一個表單變成非同步的。

其中ajaxForm相當於

$('form').submit(function(){
	$('form').ajaxSubmit(function(){});
})

來看ajaxForm的原始碼

在ajaxForm裡面多次出現doAjaxSubmit，其實ajaxForm裡面的資料提交呼叫的就是ajaxSubmit。

----------------------------------------------------------------------------------------------------------------------------------------------

那麼對於上傳檔案呢？沒關係，這兩個方法可以提交表單中的檔案。我上面說了這兩個其實用的也是FormData，來看ajaxSubmit原始碼

總結

1.ajax的data的型別支援字串和json物件。

2.可以使用$('form').serialize()來獲取表單裡面的非檔案資料轉化為字串。

3.使用FormData物件來傳輸檔案，FormData 物件的欄位型別可以是 Blob, File, 或者 string: 如果它的欄位型別不是Blob也不是File，則會被轉換成字串型別。

4.請注意，使用append新增時formdata的key若已存在，則不能重複新增，會忽略本次append操作，所以建議set替代append來使用

5.當然可以使用ajax原生方法來傳輸檔案，有興趣的可以研究下。

6.建議使用jquery裡面的$('form').submit()、$.ajax({})的組合來完成非同步提交。