在做开发的过程中,前端ajax传参和后端springboot接收参数经常用到,之前老是把这些搞混,导致出现错误,也在网上查阅了很多资料,再根据自己的经验和测试,对这部分内容做了一些使用总结。后面会再慢慢补充
一、当前端传参为JSON对象
//前端传递参数为JSON对象
function test(){
var temp ={
id:'1',
name:'javfck',
unit:'集团公司'
}
$.ajax({
type:'post',
url:'/hzsh/eomc-yunx/zctzjnsc/test',
data:temp, //前端传递参数为JSON对象
dataType:'JSON', //后端返回的数据类型为JSON
success:function(result){
console.log(result)
}
});
}
//1、后端使用request接收
@ResponseBody
@RequestMapping("/zctzjnsc/test")
public String testParam(HttpServletRequest request) {
String id = request.getParameter("id");
String name = request.getParameter("name");
String unit = request.getParameter("unit");
System.out.println("-----------------"+name);
return null;
}
//2、后端直接用参数名接收,参数名要和前端对应
@ResponseBody
@RequestMapping("/zctzjnsc/test2")
public String testParam2(String id,String name,String unit) {
System.out.println("-----------"+id+","+name+","+unit);
//-----------1,javfck,集团公司
return null;
}
//3、若后端参数和前端不一样,需要做映射才能接收到,使用@RequestParam注解进行映射
@ResponseBody
@RequestMapping("/zctzjnsc/test3")
public String testParam3(@RequestParam(value = "id",required = false) String sId,
@RequestParam(value = "name",required = false) String sName,
@RequestParam(value = "unit",required = false) String sUnit) {
System.out.println("-----------"+sId+","+sName+","+sUnit);
//-----------1,javfck,集团公司
return null;
}
二、前端传递参数为JSON字符串
当前端传参为JSON字符串时,需设置contentType : “application/json;charset=UTF-8”,
并且后端使用@RequestBody 接收前端参数
(注意:前端传json字符串,可用@ResquestBody接收,
使用参数名 String id,String name…直接接收会报错
使用HttpServletRequest接收,获取值为null;
使用@RequestParam(value=“id”,required = false)String id获取值也为null)
//前端传递JSON字符串
function test() {
var temp = {
id : '1',
name : 'javfck',
unit : '集团公司'
}
$.ajax({
type : 'post',
url : '/hzsh/eomc-yunx/zctzjnsc/test',
data : JSON.stringify(temp), //将JSON对象转换为JSON字符串
contentType : "application/json;charset=UTF-8", //设置JSON字符串格式
dataType : 'JSON',
success : function(result) {
console.log(result)
}
});
}
//1、后端使用对应的对象接收参数
@ResponseBody
@RequestMapping("/zctzjnsc/test")
public String testParam(@RequestBody(required = false) EomcYunxZdzcFileEntity eomcYunxZdzcFileEntity) {
System.out.println("*************"+eomcYunxZdzcFileEntity);
//后端对象只匹配前端参数中和自身属性一样的字段进行封装************EomcYunxZdzcFileEntity(id=1, zdzcName=null, unit=集团公司, date=null, describe=null, attachs=null)
return null;
}
//后端使用Map<K,V>进行接收
@ResponseBody
@RequestMapping("/zctzjnsc/test2")
public String testParam2(@RequestBody(required = false) MAP<String,Object> map) {
String id = map.get("id);
String name = map.get("name");
String unit = map.get("unit");
return null;
}
三、前端ajax传参为json数组
//前端代码:
function test() {
var temp =[
{id:"1213",name:"rose",age:"20"},
{id:"23423",name:"jack",age:"34"},
{id:"45645",name:"messi",age:"26"}
]
$.ajax({
type:'post',
url:'/front/testJsonEntityArr',
data:JSON.stringify(temp),
contentType: "application/json;charset=UTF-8",
dataType:'json',
success:function(result){
console.log(JSON.stringify(result));
}
})
}
//1、后端用数组类型接收:
@ResponseBody
@RequestMapping("/testJsonEntityArr")
public String testAjax03(@RequestBody(required = false)Student[] studentArr) {
for(Student s:studentArr){
System.out.println(s);
}
return null;
}
//2、后端用集合接收参数
@ResponseBody
@RequestMapping("/testJsonEntityList")
public String testAjax031(@RequestBody(required = false)List<Student> studentList) {
for(Student s:studentList){
System.out.println("---------"+s);
}
return null;
}
四、前端传参为嵌套json数据,和传普通json数据一样
//1、当参数为嵌套json字符串时,后端使用@RequestBody的接收方式进行接收
function test() {
var temp ={
id:"001",
data:{id:"23423",name:"jack",age:"34"},
remark:"这是一个json数据"
}
$.ajax({
type:'post',
url:'/front/testJsonComplex',
data:JSON.stringify(temp),
contentType: "application/json;charset=UTF-8",
dataType:'json',
success:function(result){
console.log(JSON.stringify(result));
}
})
}
@ResponseBody
@RequestMapping("/testJsonComplex")
public String testAjax04(@RequestBody(required = false)Map<String,Object> map) {
System.out.println(map.get("id")+","+map.get("data")+","+map.get("remark"));
return null;
}
//输出:001,{"id":"23423","name":"jack","age":"34"},这是一个json数据
//2、当参数为嵌套json对象时,需要先将内部的json对象转换为json字符串
function test() {
var data = {id:"23423",name:"jack",age:"34"}
var temp ={
id:"001",
data:JSON.stringify(data),
remark:"这是一个json数据"
}
//或者这样:
/*var temp ={
id:"001",
data:'{id:"23423",name:"jack",age:"34"}',
remark:"这是一个json数据"
}*/
$.ajax({
type:'post',
url:'/front/testJsonComplex',
data:JSON.stringify(temp),
contentType: "application/json;charset=UTF-8",
dataType:'json',
success:function(result){
console.log(JSON.stringify(result));
}
})
}
@ResponseBody
@RequestMapping("/testJsonComplex")
public String testAjax04(String id,String data,String remark) {
System.out.println(id+","+data+","+remark);
return null;
}
输出:001,{"id":"23423","name":"jack","age":"34"},这是一个json数据
五、前端ajax发送GET请求
//测试方法
function test() {
var name = 'jack'
$.ajax({
type : 'GET',
url : '/hzsh/eomc-yunx/zctzjnsc/test5?name='+name,
dataType : 'JSON',
success : function(result) {
console.log(result)
}
});
}
或者
function test() {
$.ajax({
type : 'GET',
url : '/hzsh/eomc-yunx/zctzjnsc/test5',
data : 'name=tom',
dataType : 'JSON',
success : function(result) {
console.log(result)
}
});
}
或者
//测试方法
function test() {
var name = 'jack'
var age = '23'
$.ajax({
type : 'GET',
url : '/hzsh/eomc-yunx/zctzjnsc/test5',
data : 'name='+name+'&age='+age,
dataType : 'JSON',
success : function(result) {
console.log(result)
}
});
}
后端:
@ResponseBody
@RequestMapping("/zctzjnsc/test4")
public String testParam3(HttpServletRequest request) {
String name = request.getParameter("name");
//String age = request.getParameter("age");
System.out.println(name);
return null;
}
或者
@ResponseBody
@RequestMapping("/zctzjnsc/test5")
public String testParam4(String name,String age) {
//若参数名不一致,使用@RequestParam注解:将请求参数绑定到控制器的方法参数上
System.out.println(name);
return null;
}