頁面ajax請求傳參及java後端資料接收
阿新 • • 發佈：2020-12-15
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>傳參 * @paramlistString * @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