假如現在有這樣一個表單,是添加元素用的。
<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"這樣的就可以了。
ps:jquery中ajax方法data參數的用法小結
$.ajax({ type: post, url: some.php, data: name=john&location=boston, //第一種方式傳參 // data: {name:john,location:boston} //第二種方式傳參 // data: {foo:[bar1, bar2]} 轉換為 '&foo=bar1&foo=bar2' /* 第一種我們用url傳參,參數裡面如果加帶&這個符號地話,可能參數接收不到或不完整, 如“ data: name=john&location=boston,” 如果name地值是john&smith這樣寫可能就會有問題, 我們可以用js裡面地encodeuricomponent()方法進行轉義, 但如果用data: {name:john,location:boston}這種方式寫地話就不需要進行轉義, 如果轉義地話,接收地將是轉義後地字串 */ success: function(msg){ alert( data saved: + msg ); }});