页面ajax请求传参及java后端数据接收

js ajax请求传参及java后端数据接收

  1 Controller：
  2 package com.ysl.PassingParameters.controller;
  3 import java.util.List;
  4 import java.util.Map;
  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.RequestParam;
 10 import org.springframework.web.bind.annotation.ResponseBody;
 11 
 12 import com.ysl.PassingParameters.bean.User;
 13 import com.ysl.PassingParameters.dto.RetMsg;
 14 
 15 @Controller
 16 public class TestController {
 17 
 18     /**
 19      * List<String>传参
 20      * @param listString
 21      * @return
 22      */
 23     @RequestMapping("/listString")
 24     @ResponseBody
 25     public RetMsg listString(@RequestParam("listString[]") List<String> listString){
 26         System.out.println("listString:"+listString.toString());
 27         return RetMsg.success();
 28     }
 29     
 30     
 31     /**
 32      * List<User>传参
 33      * @param listUser
 34      * @return
 35      */
 36     @RequestMapping("/listUsers")
 37     @ResponseBody
 38     public RetMsg listUsers(@RequestBody List<User> listUser){
 39         System.out.println("username:"+listUser.get(0).getUsername());
 40         return RetMsg.success();
 41     }
 42     
 43     
 44     /**
 45      * User[]传参
 46      * @param arrayUsers
 47      * @return
 48      */
 49     @RequestMapping("/arrayUsers")
 50     @ResponseBody
 51     public RetMsg arrayUsers(@RequestBody User[] arrayUsers){
 52         System.out.println("username:"+arrayUsers[0].getUsername());
 53         return RetMsg.success();
 54     }
 55     
 56     
 57     /**
 58      * List<Map<String,Object>>传参
 59      * @param listMap
 60      * @return
 61      */
 62     @RequestMapping("/listMap")
 63     @ResponseBody
 64     public RetMsg listMap(@RequestBody List<Map<String, String>> listMap){
 65         System.out.println("username:"+listMap.get(0).get("username"));
 66         return RetMsg.success();
 67     }
 68     
 69     /**
 70      * User对象传参
 71      * @param arrayUsers
 72      * @return
 73      */
 74     @RequestMapping("/users")
 75     @ResponseBody
 76     public RetMsg users(@RequestBody User users){
 77         System.out.println("username:"+users.getUsername()); 
 78         System.out.println("username:"+users.getList().get(0).getUsername()); 
 79         return RetMsg.success();
 80     }
 81 }
 82 页面：
 83 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
 84 <html>
 85 <%application.setAttribute("path", request.getContextPath());%>
 86 <head>
 87     <script type="text/javascript" src="${path}/js/jquery.min.js"></script>
 88 </head>
 89 <body>
 90 <h2>Hello World!</h2>
 91 <button id="listString">List&lt;String&gt;传参</button>
 92 <button id="listUser">List&lt;User&gt;传参</button>
 93 <button id="arrayUsers">User[]传参</button>
 94 <button id="listMap">List&lt;Map&lt;String,Object&gt;&gt;传参</button>
 95 <button id="Users">User对象（属性包含List&lt;User&gt;）传参</button>
 96 <script type="text/javascript">
 97 
 98     // List<String>传参
 99     $("#listString").click(function(){
100         var idList = new Array();  
101         idList.push("1");   
102         idList.push("1");   
103         idList.push("1");   
104         $.ajax({
105             type:"post",
106             url:"${path}/listString",
107             data:{"listString":idList},
108             dataType:"json",
109             success:function(retMsg){
110                 if(retMsg.code==200){
111                     alert("success");
112                 }else{
113                     alert("false");
114                 }
115             }
116         })
117     })
118     
119     // List<User>传参
120     $("#listUser").click(function(){
121         var userList = new Array();  
122         userList.push({username: "zhangsan",password: "332"});  
123         userList.push({username: "zhangsan",password: "332"});  
124         $.ajax({
125             type:"post",
126             url:"${path}/listUsers",
127             data:JSON.stringify(userList),
128             dataType:"json",  
129             contentType : 'application/json;charset=utf-8', //设置请求头信息  
130             success:function(retMsg){
131                 if(retMsg.code==200){
132                     alert("success");
133                 }else{
134                     alert("false");
135                 }
136             }
137         })
138     })
139 
140     
141     //传User对象数组
142     $("#arrayUsers").click(function(){
143         var userList = [{username: "李四",password: "123"},{username: "张三",password: "332"}];  
144         $.ajax({
145             type: "POST",  
146             url: "${path}/arrayUsers",  
147             data: JSON.stringify(userList),//将对象序列化成JSON字符串  
148             dataType:"json",  
149             contentType : 'application/json;charset=utf-8', //设置请求头信息  
150             success:function(retMsg){
151                 if(retMsg.code==200){
152                     alert("success");
153                 }else{
154                     alert("false");
155                 }
156             }
157         }); 
158     })
159     
160     // List<Map<String,Object>>传参
161     $("#listMap").click(function(){
162         var userList = new Array();  
163         userList.push({username: "zhangsan",password: "332"});  
164         userList.push({username: "zhangsan",password: "332"});  
165         $.ajax({
166             type:"post",
167             url:"${path}/listMap",
168             data:JSON.stringify(userList),
169             dataType:"json",  
170             contentType : 'application/json;charset=utf-8', //设置请求头信息  
171             success:function(retMsg){
172                 if(retMsg.code==200){
173                     alert("success");
174                 }else{
175                     alert("false");
176                 }
177             }
178         })
179     })
180     
181     //User对象传参
182     $("#Users").click(function(){
183         var list = new Array();  
184         list.push({username: "zhangsan",password: "332"});  
185         list.push({username: "zhangsan",password: "332"}); 
186         var user = {};
187         user.username = "张三";
188         user.password = "密码";
189         user.list = list;
190         $.ajax({
191             type:"post",
192             url:"users",
193             data:JSON.stringify(user),
194             datatype:"json",
195             contentType:"application/json;charset=utf-8",
196             success:function(retMsg){
197                 if(retMsg.code==200){
198                     alert("success");
199                 }else{
200                     alert("false");
201                 }
202             }
203         })
204     })
205 </script>
206 </body>
207 </html>

 

@RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的);

GET方式无请求体，所以使用@RequestBody接收数据时，前端不能使用GET方式提交数据，而是用POST方式进行提交。

https://blog.csdn.net/justry_deng/article/details/80972817

 

posted @ 2019-07-05 16:46  LinWenLi  阅读(18454)  评论(1)  编辑  收藏  举报