JQuery中Ajax()的data參數類型執行個體分析_jquery

本文執行個體分析了JQuery中Ajax()的data參數類型。分享給大家供大家參考，具體如下：

前面簡單分析介紹了《ajax中data傳參的兩種方式》，對於ajax參數傳遞方式有了初步的瞭解，這裡就來進一步分析一下ajax中data參數的類型。

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

<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程式設計有所協助。