文档章节

jQuery的ajax 方法提交多个对象数组问题

文文1
 文文1
发布于 2017/08/10 18:30
字数 504
阅读 80
收藏 0

当用$.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('添加失败')
                }
            }
        });
    }

监测之后发觉数据变成啦

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

后台能识别的数组应该是这样的格式

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('添加失败')
                }
            }
        });
    }

 

后台接收代码

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);
}

 

本文转载自:

文文1
粉丝 24
博文 402
码字总数 128240
作品 0
长沙
程序员
私信 提问
Jquery中AJAX参数详细介绍

在使用jquery的时候,我们经常用到jquery中对ajax的封装,下面对ajax函数的各参数详细说明和讲解,以便更好的理解和使用 $.get(url, data, callback,type) 和 $.post(url, data, callback, ...

凯文加内特
2015/01/28
0
0
jQuery ajax - serialize()方法以及常见问题

使用ajax时,常常需要拼装input数据为'name=abc&sex=1'这种形式,用JQuery的serialize方法可以轻松的完成这个工作! jQuery ajax - serialize() 方法定义和用法 serialize() 方法通过序列化表...

freedonn
2014/05/10
0
0
使用Ajax方法提交多个对象数组的问题

当用$.ajax()向后台提交参数时,如果参数中数组的话一般在后台会用List<T>接收;但老是不成功如下面代码 var arr1 = [{ "Name": "Tom", "Age": 17 }, { "Name": "Jim", "Age": 22}];var arr2 ......

webxiaohua
2015/04/22
0
0
jquery的一些用法 有用的用法。

AJAX 框架 用 Asp.net ajax 还是 Jquery ? AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NET AJAX 并不包括在 AJAX 框架之中。 刚开始学了 JQuqery, 众多的...

雪中漫步
2010/03/29
498
0
Python全栈 Web(Ajax JSON JQuery)

JOSN: Javascript Object Notation 作用: 主要约束前后端交互数据的格式 JSON的格式 表示单个对象 使用{} 采用键值对的格式保存数据 键必须使用双引号引起来 相当于Python的字典 表示多个对...

巴黎香榭
2018/10/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

抽离css以及公共js

分离css 分离css:为何要把 CSS 文件分离出来,而不是直接一起打包在 JS 中。最主要的原因是我们希望更好地利用缓存。 extract-text-webpack-plugin > 1. 假设我们原本页面的静态资源都打包成...

莫西摩西
38分钟前
0
0
面向对象的7大原则

https://blog.csdn.net/u010355144/article/details/44940171

南桥北木
56分钟前
1
0
Jenkins的配置从节点中默认没有Launch agent via Java Web Start,该如何配置使用

Jenkins的配置从节点中默认没有Launch agent via Java Web Start,如下图所示,而这种启动方式在Windows上是最方便的。 如何设置才能让出来呢? 1:打开"系统管理"——"Configure Global Sec...

shzwork
今天
2
0
BAT面试必问HashMap源码分析

HashMap 简介 HashMap 主要用来存放键值对,它基于哈希表的Map接口实现,是常用的Java集合之一。 JDK1.8 之前 HashMap 由 数组+链表 组成的,数组是 HashMap 的主体,链表则是主要为了解决哈...

别打我会飞
今天
6
0
RISC-V双周简报0x1f:一晚上写个RISC-V处理器玩玩(2018-09-01)

https://cnrv.io/bi-week-rpts/2018-09-01 https://blog.csdn.net/zoomdy/article/details/82914730...

whoisliang
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部