• jQuery的ajax 方法提交多个对象数组问题 C# traditional $.param


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

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

    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

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

    C#后台接收代码

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

    这样一来问题就解决啦!

  • 相关阅读:
    行为型模式之 命令模式
    结构型模式之 代理模式
    oop编程思想
    2013应届毕业生各大IT公司待遇整理汇总篇(转)
    python定义class
    python——博客园首页信息提取与分析(转载有改动)
    深入浅出TCP/IP协议
    python基础之socket
    python基础
    c++stl之stack
  • 原文地址:https://www.cnblogs.com/william-lin/p/4409891.html
Copyright © 2020-2023  润新知