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

 

這樣一來問題就解決啦!