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