最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jq中使用Ajax方法提交多个对象数组的问题
时间:2022-06-25 17:41:59 编辑:袖梨 来源:一聚教程网
当用$.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(Listlist1, List list2) { return "1"; } public class User { public string Name { get; set; } public int Age { get; set; } }
这样一来问题就解决啦!
相关文章
- jm天堂网页版官方登录入口-jm天堂网页版直接登录入口 12-14
- 蝉妈妈网页版直达入口-蝉妈妈app官方正版入口在哪 12-14
- 豆包AI智能在线网页解析神器-豆包AI智能在线会议纪要生成助手 12-14
- 小红书Web官网登录入口-小红书官方网页版一键登录 12-14
- 苍云阅读app如何快速找到目录-目录入口位置 12-14
- 苹果ID登录官网入口 - 苹果Apple ID账户登录页面一键直达 12-14