jQuery.Ajax()的data參數(shù)類型詳解
假如現(xiàn)在有這樣一個表單,是添加元素用的。
<form id='addForm' action='UserAdd.action' type='post'> <label for='uname'>用戶名</label>:<input type='text' name='uname' id='uname'><br> <label for='mobileIpt'>手機(jī)號:</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提交。
以前我們是這樣實現(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('添加失敗')
}
}
})
}
這沒有什么錯,就是獲取表單元素的值實在是太麻煩....這里只有三項,很多項的時候就廢了....
直到有一天,我發(fā)現(xiàn)了jquery的serializeArray方法
序列化表格元素 (類似 '.serialize()' 方法) 返回 JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)。
注意,此方法返回的是JSON對象而非JSON字符串。需要使用插件或者第三方庫進(jìn)行字符串化操作。
返回的JSON對象是由一個對象數(shù)組組成的,其中每個對象包含一個或兩個名值對——name參數(shù)和value參數(shù)(如果value不為空的話)。
我們來試試看
$('#addForm').serializeArray();
//返回數(shù)據(jù)結(jié)構(gòu),是json數(shù)組,每個對像分別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數(shù)組,在jquery內(nèi)部自己調(diào)用$.param()處理的。
我們來看下jquery.param()方法的說明:
返回值:StringjQuery.param(obj,[traditional])
將表單元素數(shù)組或者對象序列化。
參數(shù)
obj,[traditional]
數(shù)組或jQuery對象會按照name/value對進(jìn)行序列化,普通對象按照key/value對進(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)系啊,我們換一個json數(shù)組來看
$.param([{uanme:'vic'},{mobileIpt:'110'},{birthday:'2013-11-11'}]);
"undefined=&undefined=&undefined="
這個轉(zhuǎn)換不成功了吧,為什么我們表單的那種數(shù)據(jù)能夠成功轉(zhuǎn)換成url參數(shù)呢?我們來看下jquery源碼
//在ajax()方法中,對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ù),那么挨個循環(huán),只取他們的name屬性和value屬性拼接字符串。
如果是普通對象,循環(huán)該對象的屬性,然后拼接字符串。
總結(jié):
所以,本文要說的是,在jquery的ajax函數(shù)中,可以傳入3種類型的數(shù)據(jù)
1.文本:
"uname=alice&mobileIpt=110&birthday=1983-05-12"
2.json對象:
{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ù)據(jù)的話只需要serialize()方法直接獲取"uname=alice&mobileIpt=110&birthday=1983-05-12"這樣的就可以了。
以上所述是小編給大家介紹的jQuery.Ajax()的data參數(shù)類型詳解,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
- JQuery的Ajax請求實現(xiàn)局部刷新的簡單實例
- jquery ajax請求方式與提示用戶正在處理請稍等
- Jquery Ajax請求文件下載操作失敗的原因分析及解決辦法
- 淺析jQuery Ajax請求參數(shù)和返回數(shù)據(jù)的處理
- jQuery實現(xiàn)分頁功能(含ajax請求、后臺數(shù)據(jù)、附完整demo)
- jQuery Ajax請求后臺數(shù)據(jù)并在前臺接收
- jQuery取消ajax請求的方法
- 封裝了jQuery的Ajax請求全局配置
- jQuery+Ajax請求本地數(shù)據(jù)加載商品列表頁并跳轉(zhuǎn)詳情頁的實現(xiàn)方法
- 關(guān)于jQuery.ajax()的jsonp碰上post詳解
- jquery實現(xiàn)Ajax請求的幾種常見方式總結(jié)
相關(guān)文章
artDialog 4.1.5 Dreamweaver代碼提示/補(bǔ)全插件 附下載
artDialog是一個輕巧且高度兼容的javascript對話框組件,可讓你的網(wǎng)頁交互擁有桌面軟件般的用戶體驗2012-07-07
jquery插件orbit.js實現(xiàn)圖片折疊輪換特效
Orbit是一個設(shè)計良好并且容易使用的jQuery圖片滑動幻燈片插件,它除了支持圖片滾動切換展示外,還支持針對內(nèi)容的滾動。插件的定制性相當(dāng)高,它提供了多個參數(shù)的設(shè)置,通過設(shè)置你可以將它打造成完全符合你要求的樣式。2015-04-04
Tab頁界面 用jQuery及Ajax技術(shù)實現(xiàn)(php后臺)
到了B/S開發(fā)時代,網(wǎng)頁前端布局也把Tab頁的布局形式吸收了過來。特別是和Ajax技術(shù)結(jié)合起來,可以更充分發(fā)揮Tab頁的良好表現(xiàn)力和數(shù)據(jù)緩存的優(yōu)勢,是一種良好的網(wǎng)頁布局形式2011-10-10
基于jquery實現(xiàn)控制經(jīng)緯度顯示地圖與衛(wèi)星
下文與大家分享下使用jquery實現(xiàn)控制經(jīng)緯度顯示地圖與衛(wèi)星,感興趣的朋友可以參考下哈,希望對你有所幫助2013-05-05
jQuery彈出層插件popShow(改進(jìn)版)用法示例
這篇文章主要介紹了jQuery彈出層插件popShow(改進(jìn)版)用法,對比前文分析了popShow插件的使用方法,需要的朋友可以參考下2017-01-01

