當用$.ajax()向后臺提交參數時,如果參數中數組的話一般在后臺會用List<T>接收;但老是不成功如下面代碼
var arr1=[{ "aa": "1", "bb": "2" }, { "aa": "3", "bb": "4"}];var arr2=[{ "aa": "1", "bb": "2" }, { "aa": "3", "bb": "4"}];function addUser(){ $.ajax({ url:'UserAdd', data:{list1:arr1,list2:arr2}, type:'post', success:function(msg){ if(msg=='1'){ console.log('添加成功'); }else{ console.log('添加失敗') } } }); }
用Fiddler 監測之后發覺數據變成啦
list1[0][aa]=1&list1[0][bb]=2&list1[1][aa]=3&list1[1][bb]=4&list2[0][aa]=1&list2[0][bb]=2&list2[1][aa]=3&list2[1][bb]=4
C#中能識別的數組應該是這樣的格式
list1[0].aa=1&list1[0].bb=2&list1[1].aa=3&list1[1].bb=4&list2[0].aa=1&list2[0].bb=2&list2[1].aa=3&list2[1].bb=4
在網上查找資料之后了解到ajax post之前會用因為jQuery需要調用jQuery.param序列化參數,我們來看下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 ); } }
找到原因之后就好辦啦
首先,traditional為false,我們可以通過設置traditional 為true阻止深度序列化
先寫一個數組轉為對象的方法:
Array.prototype.serializeObject = function (lName) { var o = {}; $t = this; for (var i = 0; i < $t.length; i++) { for (var item in $t[i]) { o[lName+'[' + i + '].' + item.toString()] = $t[i][item].toString(); } } return o; };
var arr1=[{ "aa": "1", "bb": "2" }, { "aa": "3", "bb": "4"}];var arr2=[{ "aa": "1", "bb": "2" }, { "aa": "3", "bb": "4"}];function addUser(){ $.ajax({ url:'UserAdd', data:$.param(arr1.serializeObject("list1"))+"&"+$.param(arr2.serializeObject("list2"), //手動把數據轉換拼接 type:'post', traditional:true, //這里必須設置 success:function(msg){ if(msg=='1'){ console.log('添加成功'); }else{ console.log('添加失敗') } } }); }
C#后臺接收代碼
public class Test { public int aa{ get; set; } public int bb{ get; set; } } public ActionResult UserAdd( List<Test> list1, List<Test> list2) { return Json(amm); }
這樣一來問題就解決啦!
新聞熱點
疑難解答