jQuery.Ajax()的data參數類型實例詳解-js教程-PHP中文網

jQuery.Ajax()的data參數類型實例詳解

小云云

發布： 2017-12-31 16:17:23

原創

1734 人瀏覽過

本文主要介紹了jQuery.Ajax()的data參數類型詳解,需要的朋友可以參考下，希望能幫助到大家。

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

<form id=&#39;addForm&#39; action=&#39;UserAdd.action&#39; type=&#39;post&#39;>
   <label for=&#39;uname&#39;>用户名</label>：<input type=&#39;text&#39; name=&#39;uname&#39; id=&#39;uname&#39;><br>
   <label for=&#39;mobileIpt&#39;>手机号：</label><input type=&#39;text&#39; name=&#39;mobileIpt&#39; id=&#39;mobileIpt&#39;><br>
   <label for=&#39;birthday&#39;>生日：</label><input type=&#39;text&#39; name=&#39;birthday&#39;><br>
   <input type=&#39;button&#39; value=&#39;提交&#39; onclick=&#39;addUser()&#39;>
</form>

登入後複製

我們不想使用表單submit的方式來加入這個元素，我們就想用ajax提交。

以前我們是這樣實現的：

function addUser(){
    var user = {
      uname:$("#uname").val(),
      mobileIpt:$("#mobileIpt").val(),
      birthday:$("#birthday").val()
    };
    $.ajax({
      url:&#39;UserAdd.action&#39;,
      data:user,
      type:&#39;post&#39;,
      dataType:&#39;text&#39;,
      success:function(msg){
        if(msg==&#39;1&#39;){
          console.log(&#39;添加成功&#39;);
        }else{
          console.log(&#39;添加失败&#39;)
        }
      }
       
    })
  }

登入後複製

這沒有什麼錯，就是取得表單元素的值實在是太麻煩....這裡只有三項，很多項的時候就廢了....

直到有一天，我發現了jquery的serializeArray方法

序列化表格元素(類似'.serialize()' 方法) 傳回JSON 資料結構資料。

注意，此方法傳回的是JSON物件而非JSON字串。需要使用插件或第三方函式庫進行字串化操作。

傳回的JSON物件是由一個物件陣列組成的，其中每個物件包含一個或兩個名稱值對－name參數和value參數（如果value不為空的話）。

我們來試試看

$(&#39;#addForm&#39;).serializeArray();
//返回数据结构，是json数组，每个对像分别name和value为key，代表这个表单元素的name和value
[
  {"name":"uname","value":""},
  {"name":"mobileIpt","value":""},  
  {"name":"birthday","value":""}
]

登入後複製

這個貌似用不上啊

我們用JQuery.param()方法處理一下：

var arr = $(&#39;#addForm&#39;).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:&#39;vic&#39;,mobileIpt:&#39;110&#39;,birthday:&#39;2013-11-11&#39;});
"uanme=vic&mobileIpt=110&birthday=2013-11-11"

登入後複製

看著說明，貌似也跟我們沒關係啊,我們換一個json數組來看

$.param([{uanme:&#39;vic&#39;},{mobileIpt:&#39;110&#39;},{birthday:&#39;2013-11-11&#39;}]);
"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:&#39;vic&#39;,mobileIpt:&#39;110&#39;,birthday:&#39;2013-11-11&#39;}

登入後複製

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"這樣的就可以了。