页面ajax请求传参及java后端数据接收
2020-12-15
js ajax请求传参及java后端数据接收
后端controller的代码
Controller： package com.ysl.PassingParameters.controller; import java.util.List; import java.util.Map; 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.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import com.ysl.PassingParameters.bean.User; import com.ysl.PassingParameters.dto.RetMsg; @Controller public class TestController { /** * List<String>传参 * @param listString * @return */ @RequestMapping("/listString") @ResponseBody public RetMsg listString(@RequestParam("listString[]") List<String> listString){ System.out.println("listString:"+listString.toString()); return RetMsg.success(); } /** * List<User>传参 * @param listUser * @return */ @RequestMapping("/listUsers") @ResponseBody public RetMsg listUsers(@RequestBody List<User> listUser){ System.out.println("username:"+listUser.get(0).getUsername()); return RetMsg.success(); } /** * User[]传参 * @param arrayUsers * @return */ @RequestMapping("/arrayUsers") @ResponseBody public RetMsg arrayUsers(@RequestBody User[] arrayUsers){ System.out.println("username:"+arrayUsers[0].getUsername()); return RetMsg.success(); } /** * List<Map<String,Object>>传参 * @param listMap * @return */ @RequestMapping("/listMap") @ResponseBody public RetMsg listMap(@RequestBody List<Map<String, String>> listMap){ System.out.println("username:"+listMap.get(0).get("username")); return RetMsg.success(); } /** * User对象传参 * @param arrayUsers * @return */ @RequestMapping("/users") @ResponseBody public RetMsg users(@RequestBody User users){ System.out.println("username:"+users.getUsername()); System.out.println("username:"+users.getList().get(0).getUsername()); return RetMsg.success(); } }
前端代码：
页面： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试ajax传参</title> <script type="text/javascript" src="./lib/jquery.min.js"></script> </head> <body> <h2>Hello World!</h2> <button id="stringAndString">ListString传参</button> <button id="listString">ListString传参</button> <button id="User">User传参</button> <button id="listUser">ListUser传参</button> <button id="arrayUsers">User[]传参</button> <button id="listMap">ListMapStringObject传参</button> <button id="Users">User对象（属性包含ListUser）传参</button> <script type="text/javascript"> var prourl = "http:localhost:8080"; // 多参数传参 $("#stringAndString").click(function(){ str1 = "zhang"; str2 = "123456"; $.ajax({ type:"post", url:"${prourl}/stringAndString", data:"string1="+str1+"&string2="+str2, dataType:"json", success:function(retMsg){ if(retMsg.code==200){ alert("success"); }else{ alert("false"); } } }) }) // List<String>传参 $("#listString").click(function(){ var idList = new Array(); idList.push("1"); idList.push("1"); idList.push("1"); $.ajax({ type:"post", url:"${prourl}/listString", data:{"listString":idList}, dataType:"json", success:function(retMsg){ if(retMsg.code==200){ alert("success"); }else{ alert("false"); } } }) }) // User传参 $("#user").click(function(){ var user = {username: "zhangsan",password: "332"}; $.ajax({ type:"post", url:"${prourl}/user", data:JSON.stringify(user), dataType:"json", contentType : 'application/json;charset=utf-8', //设置请求头信息 success:function(retMsg){ if(retMsg.code==200){ alert("success"); }else{ alert("false"); } } }) }) // List<User>传参 $("#listUser").click(function(){ var userList = new Array(); userList.push({username: "zhangsan",password: "332"}); userList.push({username: "zhangsan",password: "332"}); $.ajax({ type:"post", url:"${prourl}/listUsers", data:JSON.stringify(userList), dataType:"json", contentType : 'application/json;charset=utf-8', //设置请求头信息 success:function(retMsg){ if(retMsg.code==200){ alert("success"); }else{ alert("false"); } } }) }) //传User对象数组 $("#arrayUsers").click(function(){ var userList = [{username: "李四",password: "123"},{username: "张三",password: "332"}]; $.ajax({ type: "POST", url: "${prourl}/arrayUsers", data: JSON.stringify(userList),//将对象序列化成JSON字符串 dataType:"json", contentType : 'application/json;charset=utf-8', //设置请求头信息 success:function(retMsg){ if(retMsg.code==200){ alert("success"); }else{ alert("false"); } } }); }) // List<Map<String,Object>>传参 $("#listMap").click(function(){ var userList = new Array(); userList.push({username: "zhangsan",password: "332"}); userList.push({username: "zhangsan",password: "332"}); $.ajax({ type:"post", url:"${prourl}/listMap", data:JSON.stringify(userList), dataType:"json", contentType : 'application/json;charset=utf-8', //设置请求头信息 success:function(retMsg){ if(retMsg.code==200){ alert("success"); }else{ alert("false"); } } }) }) //User对象传参 $("#Users").click(function(){ var list = new Array(); list.push({username: "zhangsan",password: "332"}); list.push({username: "zhangsan",password: "332"}); var user = {}; user.username = "张三"; user.password = "密码"; user.list = list; $.ajax({ type:"post", url:"${prourl}/users", data:JSON.stringify(user), datatype:"json", contentType:"application/json;charset=utf-8", success:function(retMsg){ if(retMsg.code==200){ alert("success"); }else{ alert("false"); } } }) }) </script> </body> </html>
@RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的);
GET方式无请求体，所以使用@RequestBody接收数据时，前端不能使用GET方式提交数据，而是用POST方式进行提交。
参考：https://www.cnblogs.com/new-life/p/11138873.html
