jQuery的ajax 方法提交多个对象数组问题 C# traditional $.param

时间:2023-03-08 19:01:48
jQuery的ajax 方法提交多个对象数组问题 C# traditional $.param

当用$.ajax()向后台提交参数时,如果参数中数组的话一般在后台会用List<T>接收;但老是不成功如下面代码

var arr1=[{ "aa": "", "bb": "" }, { "aa": "", "bb": ""}];

var arr2=[{ "aa": "", "bb": "" }, { "aa": "", "bb": ""}];

function addUser(){

        $.ajax({
url:'UserAdd',
data:{list1:arr1,list2:arr2},
type:'post',
success:function(msg){
if(msg==''){
console.log('添加成功');
}else{
console.log('添加失败')
}
}
});
}

用Fiddler 监测之后发觉数据变成啦

list1[][aa]=&list1[][bb]=&list1[][aa]=&list1[][bb]=&list2[][aa]=&list2[][bb]=&list2[][aa]=&list2[][bb]=

C#中能识别的数组应该是这样的格式

list1[].aa=&list1[].bb=&list1[].aa=&list1[].bb=&list2[].aa=&list2[].bb=&list2[].aa=&list2[].bb=

在网上查找资料之后了解到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);
}

这样一来问题就解决啦!