JQuery.Ajax()的data引數型別
本文以前提到的三種類型，這三種引數本質上都是變成了類似“uname=alice&mobileIpt=110&birthday=1983-05-12“”這樣的字串。
除了這三種類型，還可以是：
4、JSON字串，形如
{"name": "uname", "age": 18}
注意，這個地方不是json物件，是json字串，字串。這樣，在後臺就可以直接注入到物件中。
當你需要向後臺提交一組物件時時，json字串的好處就體現出來了（物件陣列）。
一般都是用post方法傳遞引數。
寫法：
|
1 2 3 4 5 6 7 8 9 |
|
5、FormData物件，它可以更靈活方便的傳送表單資料，因為可以獨立於表單使用。
最大的好處是可以通過Ajax上傳檔案。通過這種方式，可以非常方便的進行表單提交，也不需要下文提到的那種方法了，直接表單轉換成FormData物件即可。
|
1 2 3 4 5 6 7 8 9 |
// 不設定內容型別
|
可以參考：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
6.其他型別，比如html, 比如XML，只要設定要contentType即可，類似JSON型別
—————————————————分割線—————————————————————————————
假如現在有這樣一個表單，是新增元素用的。
<form id='addForm' action='UserAdd.action' type='post'>
<label for='uname'>使用者名稱</label>：<input type='text' name='uname' id='uname'><br>
<label for='mobileIpt'>手機號：</label><input type='text' name='mobileIpt' id='mobileIpt'><br>
<label for='birthday'>生日：</label><input type='text' name='birthday'><br>
<input type='button' value='提交' onclick='addUser()'>
</form>
我們不想使用表單submit的方式新增這個元素，我們就想使用ajax提交。
以前我們是這樣實現的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
這沒有什麼錯，就是獲取表單元素的值實在是太麻煩....這裡只有三項，很多項的時候就廢了....
直到有一天，我發現了jquery的serializeArray方法（現在請使用FormData）
序列化表格元素 (類似 '.serialize()' 方法) 返回 JSON 資料結構資料。 注意，此方法返回的是JSON物件而非JSON字串。需要使用外掛或者第三方庫進行字串化操作。 返回的JSON物件是由一個物件陣列組成的，其中每個物件包含一個或兩個名值對——name引數和value引數（如果value不為空的話）。
我們來試試看
$('#addForm').serializeArray();
//返回資料結構，是json陣列，每個對像分別name和value為key，代表這個表單元素的name和value
[
{"name":"uname","value":""},
{"name":"mobileIpt","value":""},
{"name":"birthday","value":""}
]
這個貌似用不上啊
我們使用JQuery.param()方法處理一下：
var arr = $('#addForm').serializeArray();
$.param(arr);
"uname=alice&mobileIpt=110&birthday=1983-05-12"
嘿這下符合我們的需求了吧，雖然不是json型別，但是至少可以作為data上傳了。
這裡我們可以直接在ajax的data處填上這個json陣列，在jquery內部自己呼叫$.param()處理的。
我們來看下jquery.param()方法的說明：
返回值:StringjQuery.param(obj,[traditional])
將表單元素陣列或者物件序列化。
引數
obj,[traditional]
陣列或jQuery物件會按照name/value對進行序列化，普通物件按照key/value對進行序列化。
traditional:是否使用傳統的方式淺層序列化。
demo:
$.param({uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'});
"uanme=vic&mobileIpt=110&birthday=2013-11-11"
看著說明，貌似也跟我們沒關係啊,我們換一個json陣列來看
$.param([{uanme:'vic'},{mobileIpt:'110'},{birthday:'2013-11-11'}]);
"undefined=&undefined=&undefined="
這個轉換不成功了吧，為什麼我們表單的那種資料能夠成功轉換成url引數呢？我們來看下jquery原始碼
//在ajax()方法中，對json型別的資料進行了$.param()處理
if ( s.data && s.processData && typeof s.data !== "string" ) {
s.data = jQuery.param( s.data, s.traditional );
}
//param方法中
if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
// Serialize the form elements
jQuery.each( a, function() {
add( this.name, this.value );
});
} else {
// If traditional, encode the "old" way (the way 1.3.2 or older
// did it), otherwise encode params recursively.
for ( prefix in a ) {
buildParams( prefix, a[ prefix ], traditional, add );
}
}
這下明白了吧，如果是json資料，那麼挨個迴圈，只取他們的name屬性和value屬性拼接字串。
如果是普通物件，迴圈該物件的屬性，然後拼接字串。
總結：
所以，本文要說的是，在jquery的ajax函式中，可以傳入3種類型的資料
1.文字："uname=alice&mobileIpt=110&birthday=1983-05-12"
2.json物件：{uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'}
3.json陣列：
[
{"name":"uname","value":"alice"},
{"name":"mobileIpt","value":"110"},
{"name":"birthday","value":"2012-11-11"}
]
所以，我們可以一鍵獲取表單並提交，非常方便。
補充：
其實提取表單資料的話只需要serialize()方法直接獲取"uname=alice&mobileIpt=110&birthday=1983-05-12"這樣的就可以了。