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

來源:互聯網
上載者:User

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

這樣一來問題就解決啦!

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.