DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> jQuery.Ajax()的data參數類型詳解
jQuery.Ajax()的data參數類型詳解
編輯:JQuery入門技巧     

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

<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.Ajax()的data參數類型詳解,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved