最近忙得不可開交啊，一個星期沒出來透透氣了，總算有點時間，來來來總結點東西：Ajax()中data參數類型。聊到data()方法，玩過ajax的童鞋肯定不會陌生了，data() 方法向被選元素附加數據，或者從被選元素獲取數據。

舉個簡單例子：

向元素附加數據，然后取回該數據：$("#btn1").click(function(){

$("div").data("greeting",?"Hello?World");

});

$("#btn2").click(function(){

alert($("div").data("greeting"));

});

從元素返回數據

從被選元素中返回附加的數據。

語法$(selector).data(name)參數描述

name可選。規定要取回的數據的名稱。

如果沒有規定名稱，則該方法將以對象的形式從元素中返回所有存儲的數據。

向元素附加數據

向被選元素附加數據。

語法$(selector).data(name,value)參數描述

name必需。規定要設置的數據的名稱。

value必需。規定要設置的數據的值。

使用對象向元素附加數據

使用帶有名稱/值對的對象向被選元素添加數據。

語法$(selector).data(object)參數描述

object必需。規定包含名稱/值對的對象。

OK，了解完基本的知識點，我們一起來看個具體的實例，進行實戰演練。

實例

假如現在有這樣一個表單，是添加元素用的。

用戶名：

手機號：

生日：

我們不想使用表單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=1990-10-06"

這下符合我們的需求了吧，雖然不是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:'2018-04-25'});

"uanme=vic&mobileIpt=110&birthday=2018-04-25"

看著說明，貌似也跟我們沒關系啊，我們換一個json數組來看；$.param([{uanme:'vic'},{mobileIpt:'110'},{birthday:'2018-04-25'}]);

"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=1990-10-06"

2. json對象：{uanme:'vic',mobileIpt:'110',birthday:'2018-04-25'}

3. json數組：[

{"name":"uname","value":"alice"},

{"name":"mobileIpt","value":"110"},

{"name":"birthday","value":"2012-11-11"}

]

所以，我們可以一鍵獲取表單并提交，非常方便。

補充：

其實提取表單數據的話只需要serialize()方法直接獲取"uname=alice&mobileIpt=110&birthday=1990-10-06"這樣的就可以了。

總結

了解完以上內容，是不是對Ajax()中data參數類型有了很深入的學習了呢。不早啦，該洗洗睡了，祝大家有個好夢！

總結

以上是生活随笔為你收集整理的聊聊ajax,聊聊Ajax()中data()基本知识以及实例分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。