ajax接收一个数组对象数组,使用Ajax方法提交多个对象数组的问题

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

var arr1 = [{ "Name": "Tom","Age": 17 },{ "Name": "Jim","Age": 22}];

var arr2 = [{ "Name": "Tom2","Age": 18 },{ "Name": "Jim2","Age": 24}];

$(function () {

$.ajax({

url: '/Home/UserAdd',data: {list1:arr1,list2:arr2},success: function (msg) {

if (msg == '1') {

console.log('添加成功');

} else {

console.log('添加失败');

}

}

});

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

list1[0][Name]:Tom

list1[0][Age]:17

list1[1][Name]:Jim

list1[1][Age]:22

list2[0][Name]:Tom2

list2[0][Age]:18

list2[1][Name]:Jim2

list2[1][Age]:24

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;

};

$.ajax({

url: '/Home/UserAdd',data: $.param(arr1.serializeObject("list1")) + "&" + $.param(arr2.serializeObject("list2")),success: function (msg) {

if (msg == '1') {

console.log('添加成功');

} else {

console.log('添加失败');

}

}

}); C#后台接收代码

public string UserAdd(List list1,List list2)

{

return "1";

}

public class User

{

public string Name { get; set; }

public int Age { get; set; }

}

这样一来问题就解决啦!

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。