ajax传递数组

在项目上用到了批量删除与批量更改状态，前台使用了EasyUI的DataGrid，用到了批量更改数据状态功能。

在前台可以获取每条数据的ID，但是如何通过数组方式传递给后台？

通过昨晚的各种方式的调试，终于得出了答案！ 在此作为备忘。

目前有两种方式可行：

方式一

前台代码：

[javascript]  view plain  copy

1. // 方式一  
2. var _list = {};  
3.   
4. for (var i = 0; i < checkedRow.length; i++) {  
5.     _list["selectedIDs[" + i + "]"] = checkedRow[i].ID;  
6. }  
7.   
8. $.ajax({  
9.     url: '@Url.Action("SetCallBackStatus")',  
10.     //data: { "selectedIDs": _list },  
11.     data: _list,  
12.     dataType: "json",  
13.     type: "POST",  
14.     //traditional: true,  
15.     success: function (responseJSON) {  
16.         // your logic  
17.         alert('Ok');  
18.     }  
19. });  

注意：

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

后台代码：

[csharp]  view plain  copy

1. public ActionResult SetCallBackStatus(List<int> selectedIDs)  
2.         {  
3.             string result = "ok";  
4.             string errMsg = "";  
5.   
6.             return this.JsonFormat(new { result = result, errMsg = errMsg });  
7.         }  

方式二

前台代码：

[javascript]  view plain  copy

1. var _list = [];  
2.   
3. for (var i = 0; i < checkedRow.length; i++) {  
4.     _list[i] = checkedRow[i].ID;  
5. }  
6.   
7. $.ajax({  
8.     url: '@Url.Action("SetCallBackStatus")',  
9.     data: { "selectedIDs": _list },  
10.     //data: _list,  
11.     dataType: "json",  
12.     type: "POST",  
13.     traditional: true,  
14.     success: function (responseJSON) {  
15.         // your logic  
16.         alert('Ok');  
17.     }  
18. });  

注意：

1、_list 是一个数组。

2、ajax参数中data为{“selectedIDs”:_list}

3、这种方式比较重要的 traditional:true。或者将2、中的 _list参数转换一下$.param(_list,true)。这里其实就是将_list作为传统的方式传递给后台。Jquery默认是做了转换的。据说是为了使用PHP。。。。后台语言而做的。其实也就是自动在参数后面追加了”[]“。

后台代码：

同方式一

针对自定义的类，也可以通过方式一jquery ajax传递给后台

例如：

[csharp]  view plain  copy

1. // 自定义Person类  
2. public class Person  
3. {  
4.     public string FirstName { get; set; }  
5.     public string LastName { get; set; }  
6. }  

[csharp]  view plain  copy

1. // 后台Action  
2. public ActionResult SetCallBackStatus(List<Person> selectedIDs)  
3. {  
4.     string result = "ok";  
5.     string errMsg = "";  
6.   
7.     return this.JsonFormat(new { result = result, errMsg = errMsg });  
8. }  

此时前台js可以这样写：

[javascript]  view plain  copy

1. var _list = {};  
2.   
3. for (var i = 0; i < checkedRow.length; i++) {  
4.     _list["selectedIDs[" + i + "].FirstName"] = checkedRow[i].FirstName;  
5.     _list["selectedIDs[" + i + "].LastName"] = checkedRow[i].LastName;  
6. }  
7.   
8. $.ajax({  
9.     url: '@Url.Action("SetCallBackStatus")',  
10.     //data: { "selectedIDs": _list },  
11.     data: _list,  
12.     dataType: "json",  
13.     type: "POST",  
14.     //traditional: true,  
15.     success: function (responseJSON) {  
16.         // your logic  
17.         alert('Ok');  
18.     }  
19. });