SpringMVC後臺接收list類型的數據的實現方式

時間 2019-11-06

標籤 springmvc 後臺接收 list 類型數據實現方式欄目 Spring 简体版

原文原文鏈接

1、背景

　　最近在作一些東西的時候，遇到一個須要Springmvc後臺接收list類型數據的需求，幾經展轉才完美解決了這個問題，今天記下來方便之後使用，也分享給須要的小夥伴們~javascript

2、實現方式

實現方式一html

前端頁面前端

 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>

後臺接收java

 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方法會出現以下圖所示的錯誤jquery

這是由於get方式的參數中的雙引號會被編碼，致使傳到後臺的再也不是json串格式，因此解析出錯。web

實現方式二ajax

前端頁面spring

 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>

後臺接收，指定參數名必須以數組方式，如：@RequestParam("datas[]")json

　　1).經過ArrayList接收後端

 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.RequestMapping;
 8 import org.springframework.web.bind.annotation.RequestMethod;
 9 import org.springframework.web.bind.annotation.RequestParam;
10 import org.springframework.web.bind.annotation.ResponseBody;
11 
12 @Controller
13 @RequestMapping("/test")
14 public class TestController {
15     @RequestMapping(value = "/index", method = RequestMethod.GET)
16     @ResponseBody
17     public List test(@RequestParam("datas[]") ArrayList<Integer> ids){
18         System.out.println("List==" + ids);
19         return ids;
20     }
21 }

　　2).經過數組進行接收

 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.RequestMapping;
 8 import org.springframework.web.bind.annotation.RequestMethod;
 9 import org.springframework.web.bind.annotation.RequestParam;
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 Integer[] test(@RequestParam("datas[]") Integer[] ids){
18         System.out.println("ids==" + ids);
19         return ids;
20     }
21 }

注意：

　　1.這種方式對於get和post方式的請求一樣都適用....

　　2.以上兩種實現方式傳到後臺的數據不能爲null,不然會報Http 400錯誤。

實現方式三

　前端頁面

 1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6     <title>測試</title>
 7 </head>
 8 <body>
 9 <input type="button" name="request" value="請求後臺"
10        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="application/javascript" src="js/jquery-1.11.1.min.js"></script>
16 <script type="text/javascript">
17 
18     $("input[name='request']").click(function () {
19         var data = [];
20         $("input[name='se']").each(function () {
21             if ($(this).prop("checked")) {
22                 data.push($(this).val());
23             }
24         });
25         $.ajax({
26             type: "post",
27             url: "/test/index",
28             data: {"datas": data.join()}
29             dataType: "json",
30             success: function (data) {
31                 var str = "";
32                 for (var i = 0; i < data.length; i++) {
33                     str += ";name=" + data[i];
34                 }
35                 $("div[name='rs']").html(str);
36             },
37             error: function () {
38                 alert("出錯啦");
39             }
40         });
41     });
42 </script>
43 </body>
44 </html>

後端代碼

　　1)經過數組接收

 1 package com.hafiz.www.controller;
 2 
 3 import org.springframework.stereotype.Controller;
 4 import org.springframework.web.bind.annotation.RequestMapping;
 5 import org.springframework.web.bind.annotation.RequestMethod;
 6 import org.springframework.web.bind.annotation.RequestParam;
 7 import org.springframework.web.bind.annotation.ResponseBody;
 8 
 9 import java.util.ArrayList;
10 import java.util.List;
11 
12 /**
13  * Desc:測試控制器
14  * Created by hafiz.zhang on 2017/7/2.
15  */
16 @Controller
17 @RequestMapping("/test")
18 public class TestController {
19     @RequestMapping(value = "/index", method = RequestMethod.POST)
20     @ResponseBody
21     public Integer[] test(@RequestParam("datas") Integer[] ids) {
22         System.out.println("ids=" + ids);
23         return ids;
24     }
25 }

　　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進行接收，而且只能用數組接收.

若是你有更好的實現方式，但願能夠拿來分享。。。。

3、總結

1.實現方式一隻對post方法有效，且比較繁瑣，不推薦！

2.實現方式二要求後端接收的時候必須聲明參數爲數組，但可使用數組或者list進行接收參數，如：@RequestParam("datas[]")，前端使用data:{"datas":data}或data:{"datas[]":data}均可以！且post和get方法都適用。可是不能傳空數組,限制也比較多，也不太推薦。

3.實現方式三隻須要前端傳值的時候使用數組的join()方法，爲空數組也不會報錯，配置簡單，要求少，且支持使用數組和list進行接收參數，比較推薦！

關於傳遞自定義對象的集合，能夠參考這篇文章：http://www.javashuo.com/article/p-nssstvgi-gr.html