ajax 提交数组泛型集合

布满荆棘的人生 2022-01-22 06:29 211阅读 0赞

转自：[https://blog.csdn.net/hanjun0612/article/details/50441437][https_blog.csdn.net_hanjun0612_article_details_50441437]

转载：http://blog.csdn.net/lingxyd\_0/article/details/10428785

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

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

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

目前有两种方式可行：

方式一

前台代码：

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

后台代码：

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.  `}`

方式二

前台代码：

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传递给后台

例如：

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

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可以这样写：

1.  `var pprds = [];`
2.   
3.  `for (var i = 0; i < rows.length; i++) {`
4.  `var pprd={`
5.  `"FirstName":rows[i].FirstName`
6.  `"LastName":rows[i].LastName`
7.  `};`
8.  `pprds[i]=pprd;`
9.  `}`
10.  
11. `$.ajax({`
12. `type: "Post",`
13. `url: '../api/PO_PPR/UpdatePPPRD_Amount',`
14. `contentType: "application/json; charset=utf-8",`
15. `data:JSON.stringify(pprds),`
16. `beforeSend: function () {`
17. `layer.load();`
18. `},`
19. `complete: function () {`
20. `layer.close(layer.load());`
21. `},`
22. `success: function (d) {`
23.  
24. `}`
25. `});`

或者：

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: _list,`
11. `dataType: "json",`
12. `type: "POST",`
13. `success: function (responseJSON) {`
14. `// your logic`
15. `alert('Ok');`
16. `}`
17. `});`

[https_blog.csdn.net_hanjun0612_article_details_50441437]: https://blog.csdn.net/hanjun0612/article/details/50441437