ajax 提交陣列 泛型集合

轉載：http://blog.csdn.net/lingxyd_0/article/details/10428785

 

 

在專案上用到了批量刪除與批量更改狀態，前臺使用了EasyUI的DataGrid，用到了批量更改資料狀態功能。

在前臺可以獲取每條資料的ID，但是如何通過陣列方式傳遞給後臺？

通過昨晚的各種方式的除錯，終於得出了答案！ 在此作為備忘。

目前有兩種方式可行：

方式一

前臺程式碼：

 

 

 

// 方式一    
var _list = {};    
    
for (var i = 0; i < checkedRow.length; i++) {    
    _list["selectedIDs[" + i + "]"] = checkedRow[i].ID;    
}    
    
$.ajax({    
    url: '@Url.Action("SetCallBackStatus")',    
    //data: { "selectedIDs": _list },    
    data: _list,    
    dataType: "json",    
    type: "POST",    
    //traditional: true,    
    success: function (responseJSON) {    
        // your logic    
        alert('Ok');    
    }    
});   

 

注意：

 

1、_list 是一個物件

2、_list中的屬性需要結合後臺引數名稱,例如”selectedIDs“，組合成類似：selectedIDs[0]，selectedIDs[1]...等Request.Params

這裡是最重要的，否則後臺認不出來。這種方式也可以傳遞自定義類的陣列。組合方式就是selectedIDs[0].FirstName，selectedIDs[0].LastName，selectedIDs[1].FirstName，selectedIDs[1].LastName...

3、ajax的data引數直接指定為_list

 

 

後臺程式碼：

public ActionResult SetCallBackStatus(List<int> selectedIDs)  
        {  
            string result = "ok";  
            string errMsg = "";  
  
            return this.JsonFormat(new { result = result, errMsg = errMsg });  
        }

方式二

 

前臺程式碼：

 

 

 

var _list = [];  
  
for (var i = 0; i < checkedRow.length; i++) {  
    _list[i] = checkedRow[i].ID;  
}  
  
$.ajax({  
    url: '@Url.Action("SetCallBackStatus")',  
    data: { "selectedIDs": _list },  
    //data: _list,  
    dataType: "json",  
    type: "POST",  
    traditional: true,  
    success: function (responseJSON) {  
        // your logic  
        alert('Ok');  
    }  
});  

注意：

 

 

1、_list 是一個陣列。

2、ajax引數中data為{“selectedIDs”:_list}

3、這種方式比較重要的 traditional:true。或者將2、中的 _list引數轉換一下$.param(_list,true)。這裡其實就是將_list作為傳統的方式傳遞給後臺。Jquery預設是做了轉換的。據說是為了使用PHP。。。。後臺語言而做的。其實也就是自動在引數後面追加了”[]“。

 

 

 

 

針對自定義的類，也可以通過方式一jquery ajax傳遞給後臺

例如：

 

// 自定義Person類  
public class Person  
{  
    public string FirstName { get; set; }  
    public string LastName { get; set; }  
}  

 

// 後臺Action  
public ActionResult SetCallBackStatus(List<Person> selectedIDs)  
{  
    string result = "ok";  
    string errMsg = "";  
  
    return this.JsonFormat(new { result = result, errMsg = errMsg });  
} 

此時前臺js可以這樣寫：

 

            var pprds = [];

            for (var i = 0; i < rows.length; i++) {  
                var pprd={
                    "FirstName":rows[i].FirstName
                    "LastName":rows[i].LastName
                };
                pprds[i]=pprd;
            }
            
            $.ajax({
                type: "Post",
                url: '../api/PO_PPR/UpdatePPPRD_Amount',
                contentType: "application/json; charset=utf-8",
                data:JSON.stringify(pprds), 
                beforeSend: function () {
                    layer.load();
                },
                complete: function () {
                    layer.close(layer.load());
                },
                success: function (d) {
                    
                }
            });

 

或者：

 

var _list = {};  
  
for (var i = 0; i < checkedRow.length; i++) {  
    _list["selectedIDs[" + i + "].FirstName"] = checkedRow[i].FirstName;  
    _list["selectedIDs[" + i + "].LastName"] = checkedRow[i].LastName;  
}  
  
$.ajax({  
    url: '@Url.Action("SetCallBackStatus")',   
    data: _list,  
    dataType: "json",  
    type: "POST",   
    success: function (responseJSON) {  
        // your logic  
        alert('Ok');  
    }  
});