使用Ajax方法提交多個對象數組的問題

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

這樣一來問題就解決啦!