SpringMVC后台接收list类型的数据的实现方式

红太狼 2021-03-26 16:08 584阅读 0赞

一、背景

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

二、实现方式

**实现方式一**

前端页面

后台接收

package com.hafiz.www.controller;
     
     import java.util.ArrayList;
     import java.util.List;
     
     import org.springframework.stereotype.Controller;
     import org.springframework.web.bind.annotation.RequestBody;
     import org.springframework.web.bind.annotation.RequestMapping;
     import org.springframework.web.bind.annotation.RequestMethod;
     import org.springframework.web.bind.annotation.ResponseBody;
     
     @Controller
     @RequestMapping("/test")
     public class TestController {
     @RequestMapping(value = "/index", method = RequestMethod.POST)
     @ResponseBody
     public List<Integer> test(@RequestBody ArrayList<Integer> ids){
     System.out.println("List==" + ids);
     return ids;
     }
     }

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

![SpringMVC后台接收list类型的数据的实现方式][SpringMVC_list]

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

**实现方式二**

前端页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>测试</title>
     </head>
     <body>
     <input type="button" name="request" value="请求后台" style="width:200px;height:50px;background-color:red;margin-bottom:20px;">
     <div name="rs"></div>
     <input type="checkbox" name="se" value="1">hafiz.zhang<br/>
     <input type="checkbox" name="se" value="2">jack.chen<br/>
     <input type="checkbox" name="se" value="3">lili.wang<br/>
     <script type="text/javascript">
     
     $("input[name='request']").click(function(){
     var data = [];
     $("input[name='se']").each(function(){
     if($(this).prop("checked")) {
     data.push($(this).val());
     }
     });
     $.ajax({
     type:"get",
     url:$.wap.url + "/test/index",
     data:{"datas":data},//或者data:{"datas[]":data}
     dataType:"json",
     success:function(data){
     var str="";
     for(var i = 0; i < data.length; i++) {
     str += ";name=" + data[i];
     }
     $("div[name='rs']").html(str);
     },
     error:function(){
     alert("出错啦");
     }
     });
     }); 
     </script>
     </body>
     </html>

后台接收，指定参数名必须以数组方式，如：**@RequestParam("datas\[\]")**

1).通过ArrayList接收

package com.hafiz.www.controller;
     
     import java.util.ArrayList;
     import java.util.List;
     
     import org.springframework.stereotype.Controller;
     import org.springframework.web.bind.annotation.RequestMapping;
     import org.springframework.web.bind.annotation.RequestMethod;
     import org.springframework.web.bind.annotation.RequestParam;
     import org.springframework.web.bind.annotation.ResponseBody;
     
     @Controller
     @RequestMapping("/test")
     public class TestController {
     @RequestMapping(value = "/index", method = RequestMethod.GET)
     @ResponseBody
     public List test(@RequestParam("datas[]") ArrayList<Integer> ids){
     System.out.println("List==" + ids);
     return ids;
     }
     }

2).通过数组进行接收

package com.hafiz.www.controller;
     
     import java.util.ArrayList;
     import java.util.List;
     
     import org.springframework.stereotype.Controller;
     import org.springframework.web.bind.annotation.RequestMapping;
     import org.springframework.web.bind.annotation.RequestMethod;
     import org.springframework.web.bind.annotation.RequestParam;
     import org.springframework.web.bind.annotation.ResponseBody;
     
     @Controller
     @RequestMapping("/test")
     public class TestController {
     @RequestMapping(value = "/index", method = RequestMethod.POST)
     @ResponseBody
     public Integer[] test(@RequestParam("datas[]") Integer[] ids){
     System.out.println("ids==" + ids);
     return ids;
     }
     }

注意：

1.这种方式对于get和post方式的请求同样都适用....

2.以上两种实现方式传到后台的数据不能为null,否则会报Http 400错误。

**实现方式三**

前端页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>测试</title>
     </head>
     <body>
     <input type="button" name="request" value="请求后台"
     style="width:200px;height:50px;background-color:red;margin-bottom:20px;">
     <div name="rs"></div>
     <input type="checkbox" name="se" value="1">hafiz.zhang<br/>
     <input type="checkbox" name="se" value="2">jack.chen<br/>
     <input type="checkbox" name="se" value="3">lili.wang<br/>
     <script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
     <script type="text/javascript">
     
     $("input[name='request']").click(function () {
     var data = [];
     $("input[name='se']").each(function () {
     if ($(this).prop("checked")) {
     data.push($(this).val());
     }
     });
     $.ajax({
     type: "post",
     url: "/test/index",
     data: {"datas": data.join()}
     dataType: "json",
     success: function (data) {
     var str = "";
     for (var i = 0; i < data.length; i++) {
     str += ";name=" + data[i];
     }
     $("div[name='rs']").html(str);
     },
     error: function () {
     alert("出错啦");
     }
     });
     });
     </script>
     </body>
     </html>

后端代码

1)通过数组接收

package com.hafiz.www.controller;
     
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
     
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * Desc:测试控制器
     * Created by hafiz.zhang on 2017/7/2.
     */
    @Controller
    @RequestMapping("/test")
    public class TestController {
    @RequestMapping(value = "/index", method = RequestMethod.POST)
    @ResponseBody
    public Integer[] test(@RequestParam("datas") Integer[] ids) {
        System.out.println("ids=" + ids);
        return ids;
        }
    }

2).通过List接收

package com.hafiz.www.controller;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    import java.util.List;
    /**
     * Desc:测试控制器
     * Created by hafiz.zhang on 2017/7/2.
     */
    @Controller
    @RequestMapping("/test")
    public class TestController {
     @RequestMapping(value = "/index", method = RequestMethod.POST)
     @ResponseBody
     public List test(@RequestParam("datas") List<Integer> ids) {
     System.out.println("ids=" + ids);
     return ids;
     }
    }

这种方式即使没有选中任何复选框进行提交，也不会报错！

> *对于想要前端传自定义对象数组到后端，以上的方式就不适用了，那么解决办法是什么呢？*

*  ajax请求中设置contentType:"application/json;charset=utf-8"
 *  ajax请求中设置data:JSON.stringify(dataList)
 *  后端Controller种用@RequestBody YourObject\[\] data进行接收，并且只能用数组接收.

如果你有更好的实现方式，希望可以拿来分享。。。。

三、总结

1.实现方式一只对post方法有效，且比较繁琐，不推荐！

2.实现方式二要求后端接收的时候必须声明参数为数组，但可以使用数组或者list进行接收参数，如：**@RequestParam("datas\[\]")，**前端使用data:\{"datas":data\}或data:\{"datas\[\]":data\}都可以！且post和get方法都适用。但是不能传空数组,限制也比较多，也不太推荐。

3.实现方式三只需要前端传值的时候使用数组的join()方法，为空数组也不会报错，配置简单，要求少，且支持使用数组和list进行接收参数，比较推荐！

[SpringMVC_list]: /images/20210327/1616774814654.jpg