假如現(xiàn)在有這樣一個(gè)表單，是添加元素用的。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括鶴壁網(wǎng)站建設(shè)、鶴壁網(wǎng)站制作、鶴壁網(wǎng)頁(yè)制作以及鶴壁網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，鶴壁網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到鶴壁省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

   用戶(hù)名：

   手機(jī)號(hào)：

   生日：

   

我們不想使用表單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('添加失敗')
        }
      }
       
    })
  } 

這沒(méi)有什么錯(cuò)，就是獲取表單元素的值實(shí)在是太麻煩....這里只有三項(xiàng)，很多項(xiàng)的時(shí)候就廢了....

直到有一天，我發(fā)現(xiàn)了jquery的serializeArray方法

序列化表格元素 (類(lèi)似 '.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不為空的話(huà)）。

我們來(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類(lèi)型，但是至少可以作為data上傳了。

這里我們可以直接在ajax的data處填上這個(gè)json數(shù)組，在jquery內(nèi)部自己調(diào)用$.param()處理的。

我們來(lái)看下jquery.param()方法的說(shuō)明：

返回值: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"

看著說(shuō)明，貌似也跟我們沒(méi)關(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類(lèi)型的數(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é)：

所以，本文要說(shuō)的是，在jquery的ajax函數(shù)中，可以傳入3種類(lèi)型的數(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ù)的話(huà)只需要serialize()方法直接獲取"uname=alice&mobileIpt=110&birthday=1983-05-12"這樣的就可以了。

以上所述是小編給大家介紹的jQuery.Ajax()的data參數(shù)類(lèi)型詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！