一、背景

最近在做一些东西的时候，遇到一个需要Springmvc后台接收list类型数据的需求，几经辗转才完美解决了这个问题，今天记下来方便以后使用，也分享给需要的小伙伴们~

二、实现方式

实现方式一

前端页面

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2 pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>测试</title>
 8 </head>
 9 <body>
10 <input type="button" name="request" value="请求后台" style="width:200px;height:50px;background-color:red;margin-bottom:20px;">
11 <div name="rs"></div>
12 <input type="checkbox" name="se" value="1">hafiz.zhang<br/>
13 <input type="checkbox" name="se" value="2">jack.chen<br/>
14 <input type="checkbox" name="se" value="3">lili.wang<br/>
15 <script type="text/javascript">
16 
17 $("input[name='request']").click(function(){
18 var data = [];
19 $("input[name='se']").each(function(){
20 if($(this).prop("checked")) {
21 data.push($(this).val());
22 }
23 });
24 var json_data = JSON.stringify(data);
25 $.ajax({
26 type:"post",
27 url:$.wap.url + "/test/index",
28 contentType:"application/json",
29 data:json_data ,
30 dataType:"json",
31 success:function(data){
32 var str="";
33 for(var i = 0; i < data.length; i++) {
34 str += ";name=" + data[i];
35 }
36 $("div[name='rs']").html(str);
37 },
38 error:function(){
39 alert("出错啦");
40 }
41 });
42 }); 
43 </script>
44 </body>
45 </html>
后台接收

 1 package com.hafiz.www.controller;
 2 
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 
 6 import org.springframework.stereotype.Controller;
 7 import org.springframework.web.bind.annotation.RequestBody;
 8 import org.springframework.web.bind.annotation.RequestMapping;
 9 import org.springframework.web.bind.annotation.RequestMethod;
10 import org.springframework.web.bind.annotation.ResponseBody;
11 
12 @Controller
13 @RequestMapping("/test")
14 public class TestController {
15 @RequestMapping(value = "/index", method = RequestMethod.POST)
16 @ResponseBody
17 public List<Integer> test(@RequestBody ArrayList<Integer> ids){
18 System.out.println("List==" + ids);
19 return ids;
20 }
21 }

注意：这种方法只适用于POST方法提交，(上面代码中标红的是必不可少的代码)如果使用get方法会出现如下图所示的错误

这是因为get方式的参数中的双引号会被编码，导致传到后台的不再是json串格式，所以解析出错。

实现方式二

前端页面

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2 pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>测试</title>
 8 </head>
 9 <body>
10 <input type="button" name="request" value="请求后台" style="width:200px;height:50px;background-color:red;margin-bottom:20px;">
11 <div name="rs"></div>
12 <input type="checkbox" name="se" value="1">hafiz.zhang<br/>
13 <input type="checkbox" name="se" value="2">jack.chen<br/>
14 <input type="checkbox" name="se" value="3">lili.wang<br/>
15 <script type="text/javascript">
16 
17 $("input[name='request']").click(function(){
18 var data = [];
19 $("input[name='se']").each(function(){
20 if($(this).prop("checked")) {
21 data.push($(this).val());
22 }
23 });
24 $.ajax({
25 type:"get",
26 url:$.wap.url + "/test/index",
27 data:{"datas":data},//或者data:{"datas[]":data}
28 dataType:"json",
29 success:function(data){
30 var str="";
31 for(var i = 0; i < data.length; i++) {
32 str += ";name=" + data[i];
33 }
34 $("div[name='rs']").html(str);
35 },
36 error:function(){
37 alert("出错啦");
38 }
39 });
40 }); 
41 </script>
42 </body>
43 </html>