JQuery中Ajax()的data參數(shù)類型實(shí)例分析
本文實(shí)例分析了JQuery中Ajax()的data參數(shù)類型。分享給大家供大家參考，具體如下：
前面簡(jiǎn)單分析介紹了《ajax中data傳參的兩種方式》，對(duì)于ajax參數(shù)傳遞方式有了初步的了解，這里就來(lái)進(jìn)一步分析一下ajax中data參數(shù)的類型。
假如現(xiàn)在有這樣一個(gè)表單，是添加元素用的。
<form id='addForm' action='UserAdd.action' type='post'> <label for='uname'>用戶名</label>：<input type='text' name='uname' id='uname'><br> <label for='mobileIpt'>手機(jī)號(hào)：</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的方式添加這個(gè)元素，我們就想使用ajax提交。
以前我們是這樣實(shí)現(xiàn)的：
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('添加失敗')
}
}
})
}
這沒有什么錯(cuò)，就是獲取表單元素的值實(shí)在是太麻煩....這里只有三項(xiàng)，很多項(xiàng)的時(shí)候就廢了....
直到有一天，我發(fā)現(xiàn)了jquery的serializeArray方法
序列化表格元素 (類似 '.serialize()' 方法) 返回 JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)。
注意，此方法返回的是JSON對(duì)象而非JSON字符串。需要使用插件或者第三方庫(kù)進(jìn)行字符串化操作。
返回的JSON對(duì)象是由一個(gè)對(duì)象數(shù)組組成的，其中每個(gè)對(duì)象包含一個(gè)或兩個(gè)名值對(duì)——name參數(shù)和value參數(shù)（如果value不為空的話）。
我們來(lái)試試看
$('#addForm').serializeArray();
//返回?cái)?shù)據(jù)結(jié)構(gòu)，是json數(shù)組，每個(gè)對(duì)像分別name和value為key，代表這個(gè)表單元素的name和value
[
{"name":"uname","value":""},
{"name":"mobileIpt","value":""},
{"name":"birthday","value":""}
]
這個(gè)貌似用不上啊
我們使用JQuery.param()方法處理一下：
var arr = $('#addForm').serializeArray();
$.param(arr);
"uname=alice&mobileIpt=110&birthday=1983-05-12"
嘿這下符合我們的需求了吧，雖然不是json類型，但是至少可以作為data上傳了。
這里我們可以直接在ajax的data處填上這個(gè)json數(shù)組，在jquery內(nèi)部自己調(diào)用$.param()處理的。
我們來(lái)看下jquery.param()方法的說明：
返回值:StringjQuery.param(obj,[traditional])
將表單元素?cái)?shù)組或者對(duì)象序列化。
參數(shù)：
obj,[traditional]
數(shù)組或jQuery對(duì)象會(huì)按照name/value對(duì)進(jìn)行序列化，普通對(duì)象按照key/value對(duì)進(jìn)行序列化。
traditional:是否使用傳統(tǒng)的方式淺層序列化。
demo:
$.param({uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'});
"uanme=vic&mobileIpt=110&birthday=2013-11-11"
看著說明，貌似也跟我們沒關(guān)系啊,我們換一個(gè)json數(shù)組來(lái)看
$.param([{uanme:'vic'},{mobileIpt:'110'},{birthday:'2013-11-11'}]);
"undefined=&undefined=&undefined="
這個(gè)轉(zhuǎn)換不成功了吧，為什么我們表單的那種數(shù)據(jù)能夠成功轉(zhuǎn)換成url參數(shù)呢？我們來(lái)看下jquery源碼
//在ajax()方法中，對(duì)json類型的數(shù)據(jù)進(jìn)行了$.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數(shù)據(jù)，那么挨個(gè)循環(huán)，只取他們的name屬性和value屬性拼接字符串。
如果是普通對(duì)象，循環(huán)該對(duì)象的屬性，然后拼接字符串。
總結(jié)：
所以，本文要說的是，在jquery的ajax函數(shù)中，可以傳入3種類型的數(shù)據(jù)
1.文本："uname=alice&mobileIpt=110&birthday=1983-05-12"
2.json對(duì)象：{uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'}
3.json數(shù)組：
[
{"name":"uname","value":"alice"},
{"name":"mobileIpt","value":"110"},
{"name":"birthday","value":"2012-11-11"}
]
所以，我們可以一鍵獲取表單并提交，非常方便。
補(bǔ)充：
其實(shí)提取表單數(shù)據(jù)的話只需要serialize()方法直接獲取"uname=alice&mobileIpt=110&birthday=1983-05-12"這樣的就可以了。
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery Ajax使用FormData上傳文件和其他數(shù)據(jù)后端web.py獲取
- 詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定
- 基于Ajax的formData圖片和數(shù)據(jù)上傳
- bootstrap jquery dataTable 異步ajax刷新表格數(shù)據(jù)的實(shí)現(xiàn)方法
- jQuery的ajax中使用FormData實(shí)現(xiàn)頁(yè)面無(wú)刷新上傳功能
- 通過Ajax使用FormData對(duì)象無(wú)刷新上傳文件方法
- DataTables+BootStrap組合使用Ajax來(lái)獲取數(shù)據(jù)并且動(dòng)態(tài)加載dom的方法（排序，過濾，分頁(yè)等）
- JavaScript將base64圖片轉(zhuǎn)換成formData并通過AJAX提交的實(shí)現(xiàn)方法
- Ajax+FormData+javascript實(shí)現(xiàn)無(wú)刷新表單信息提交
- jQuery Ajax使用FormData對(duì)象上傳文件的方法
- 通過Ajax方式上傳文件使用FormData進(jìn)行Ajax請(qǐng)求
- jQuery DataTables插件自定義Ajax分頁(yè)實(shí)例解析
- ajax請(qǐng)求data遇到的問題分析
相關(guān)文章
基于jQuery對(duì)象和DOM對(duì)象和字符串之間的轉(zhuǎn)化實(shí)例
下面小編就為大家?guī)?lái)一篇基于jQuery對(duì)象和DOM對(duì)象和字符串之間的轉(zhuǎn)化實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-08-08
jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁(yè)面及原理
很多App中,新聞或者展示類都存在下拉刷新和上拉加載的效果，如何實(shí)現(xiàn)上拉刷新下拉加載更多頁(yè)面的呢？下面小編通過下面內(nèi)容給大家介紹jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁(yè)面及原理，需要的朋友可以參考下2015-08-08
我們將創(chuàng)建一個(gè)簡(jiǎn)單的jquery菜單，只要我們懸停在導(dǎo)航欄的區(qū)域里，將展示給我們的畫面是：明亮的菜單在稍顯黑暗的背景圖中脫穎而出2013-12-12
瀏覽器端跨域訪問一直是個(gè)問題, 多數(shù)研發(fā)人員對(duì)待js的態(tài)度都是好了傷疤忘了疼,所以病發(fā)的時(shí)候,時(shí)不時(shí)地都要疼上一疼.記得很久以前使用iframe 加script domain 聲明,yahoo js util 的方式解決二級(jí)域名跨域訪問的問題.2009-12-12
這篇文章主要介紹了jQuery中的siblings用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery中siblings的功能及用法,需要的朋友可以參考下2015-12-12
淺談jQuery的bind和unbind事件(綁定和解綁事件)
下面小編就為大家?guī)?lái)一篇淺談jQuery的bind和unbind事件(綁定和解綁事件)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-03-03
jQuery插件simplePagination的使用方法示例
這篇文章主要介紹了jQuery插件simplePagination的使用方法,結(jié)合實(shí)例形式分析了jQuery插件simplePagination實(shí)現(xiàn)表單分頁(yè)相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-04-04
jquery對(duì)象和DOM對(duì)象的區(qū)別介紹
jquery對(duì)象和DOM對(duì)象在使用過程很頻繁，正是因?yàn)槿绱?，好多朋友都不知道它們之間有什么區(qū)別，下面為大家詳細(xì)介紹下，希望對(duì)大家有所幫助2013-08-08
jQuery autoComplete插件兩種使用方式及動(dòng)態(tài)改變參數(shù)值的方法詳解
這篇文章主要介紹了jQuery autoComplete插件兩種使用方式及動(dòng)態(tài)改變參數(shù)值的方法,結(jié)合實(shí)例形式分析了jQuery自動(dòng)匹配插件autoComplete的使用技巧與動(dòng)態(tài)改變參數(shù)傳入值的實(shí)現(xiàn)方法,需要的朋友可以參考下2016-10-10
這篇文章主要為大家詳細(xì)介紹了jquery事件綁定解綁機(jī)制源碼，感興趣的小伙伴們可以參考一下2016-09-09