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

这样一来问题就解决啦!

使用Ajax方法提交多个对象数组的问题的更多相关文章

  1. 使用canvas压缩图片大小的方法示例

    这篇文章主要介绍了使用canvas压缩图片大小的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  2. html5使用canvas实现弹幕功能示例

    这篇文章主要介绍了html5使用canvas实现弹幕功能示例的相关资料,需要的朋友可以参考下

  3. 前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

    这篇文章主要介绍了前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. H5 canvas实现贪吃蛇小游戏

    本篇文章主要介绍了H5 canvas实现贪吃蛇小游戏,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. html5写一个BUI折叠菜单插件的实现方法

    这篇文章主要介绍了html5写一个BUI折叠菜单插件的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  6. ios – parse.com用于键,预期字符串的无效类型,但是得到了数组

    我尝试将我的数据保存到parse.com.我已经预先在parse.com上创建了一个名为’SomeClass’的类.它有一个名为’mySpecialColumn’的列,其数据类型为String.这是我尝试使用以下代码保存数据的代码:如果我运行这个我得到:错误:密钥mySpecialColumn的无效类型,预期字符串,但得到数组这就是我在parse.com上的核心外观:有谁知道我为什么会收到这个错误?

  7. ios – NSArray indexOfObject返回nil

    任何想法为什么我不能得到一个我确定在数组中存在的对象的索引?相反,我没有……

  8. ios – 上下文类型’NSFastEnumeration’不能与数组文字一起使用

    斯威夫特3,你会这样做吗?解决方法正如您所发现的,您不能使用as-casting将数组文字的类型指定为NSFastEnumeration.您需要找到一个符合NSFastEnumeration的正确类,在您的情况下它是NSArray.通常写这样的东西:

  9. ios – 搜索数组swift中的对象

    我正在尝试使用UISearchController创建搜索功能.但是,我似乎无法使其与我的团队对象一起工作.我首先创建了一个包含id,name和shortname的TeamObject.然后我从一个url中检索teamData,并将TeamObjects添加到一个填充到tableView中的数组中.这个tableView包含一个searchController,它假设过滤数据,但没有任何反应.阵列

  10. ios – 获取资产目录文件夹中所有图像的数组

    在iOS中,是否可以获取资产目录文件夹中的图像数组?我不确定为什么会对此进行投票.我真的不知道从哪里开始.我的另一种方法是创建文件夹中所有文件的plist,但它似乎是多余的.我无法添加任何代码,因为我会添加什么?

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部