你的位置:首页 > ASP.net教程

[ASP.net教程]jQuery的ajax 方法提交多个对象数组问题 C# traditional $.param


当用$.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);    }

 

这样一来问题就解决啦!