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<String>传参</button> 92 <button id="listUser">List<User>传参</button> 93 <button id="arrayUsers">User[]传参</button> 94 <button id="listMap">List<Map<String,Object>>传参</button> 95 <button id="Users">User对象（属性包含List<User>）传参</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方式进行提交。