溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
假如現在有這樣一個表單，是添加元素用的。
<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提交。
以前我們是這樣實現的：
function addUser(){
var user = {
uname:$("#uname").val(),
mobileIpt:$("#mobileIpt").val(),
birthday:$("#birthday").val()
};
$.ajax({
url:'UserAdd.action',
data:user,
type:'post',
dataType:'text',
success:function(msg){
if(msg=='1'){
console.log('添加成功');
}else{
console.log('添加失敗')
}
}
})
}
這沒有什么錯，就是獲取表單元素的值實在是太麻煩....這里只有三項，很多項的時候就廢了....
直到有一天，我發現了jquery的serializeArray方法
序列化表格元素 (類似 '.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"這樣的就可以了。
以上所述是小編給大家介紹的jQuery.Ajax()的data參數類型詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
