文档章节

使用Ajax方法提交多个对象数组的问题

webxiaohua
 webxiaohua
发布于 2015/04/22 20:01
字数 460
阅读 221
收藏 7

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

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<User> list1, List<User> list2)
{
    return "1";
}
public class User
{
   public string Name { get; set; }
   public int Age { get; set; }
} 

这样一来问题就解决啦!

© 著作权归作者所有

共有 人打赏支持
webxiaohua
粉丝 9
博文 43
码字总数 27296
作品 0
普陀
程序员
Jquery表单插件ajaxForm用法详解

插件主要的方法: ajaxForm ajaxSubmit formToArray formSerialize fieldSerialize fieldValue clearForm clearFields resetForm 示例代码: // wait for the DOM to be loaded $(document)......

Adam-Lee
2011/12/27
0
2
【总结】异步调用ajax构造URL字符串的几类方法

通常使用ajax异步调用都是这样的格式 $.ajax(){ url:url, data:data, success: function(re){ return re;} }; 有人说过php,从简单上来说就是对字符串的处理。今天,我想说的是对data值的处理...

_小狼狗
2015/11/24
301
0
jquery表单验证插件 jquery.form.js

Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用。 1.JQuery框架软件包下载 http://docs.jquery.com/DownloadingjQuery 2.Form插件下载 https://github.com/malsup/form...

FoxHu
2012/05/08
0
1
jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传

[JQuery框架应用]:form.js官方插件介绍 Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用。 1、JQuery框架软件包下载 2、Form插件下载 3、Form插件的简单入门 第一步:先...

孙斐
2011/12/14
0
0
SegmentFault 技术周刊 Vol.33 - 什么是 JSON ?

JSON 的全称是JavaScript Object Notation,可以翻译为 JavaScript 对象表示法,即将一个 Object 以文本的方式给记录下来。 根据 ECMA-404 标准: JSON is a text format that facilitates s...

keke
2017/09/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java大数据转换16进制转10进制

public static void main(String[] args) {String hex = "0xdbf3accc683297cf0000";BigInteger amount = new BigInteger(hex.substring(2), 16);System.out.println(amount);......

任梁荣
昨天
1
0
OSChina 周六乱弹 —— 目测我们程序员丁克的几率不大

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @真Skr小机灵鬼儿:8.13分享Jocelyn Pook/Russian Red的单曲《Loving Strangers》 《Loving Strangers》- Jocelyn Pook/Russian Red 手机党少...

小小编辑
昨天
9
3
TypeScript基础入门 - 函数 - 剩余参数

转载 TypeScript基础入门 - 函数 - 剩余参数 项目实践仓库 https://github.com/durban89/typescript_demo.gittag: 1.2.1 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能...

durban
昨天
1
0
OpenCV边缘检测算子原理总结及实现

1. 拉普拉斯算子 原理:是一种基于图像导数运算的高通线性滤波器。它通过二阶导数来度量图像函数的曲率。 拉普拉斯算子是最简单的各向同性微分算子,它具有旋转不变性。一个二维图像函数的拉...

漫步当下
昨天
0
0
Spring源码阅读——1

开始读Spring源码吧,看再多的技术博客,不如自己看一下~~~~~ Spring源码目前在github中,新版本基于gradle构建。所以阅读源码需要先安装github和gradle。 spring中git地址 1、安装git(略)...

叶枫啦啦
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部