本帖记录自己遇到的一些ajax或前端踩到的小坑。
异常代码详情
本例基于springMVC编写
前端ajax请求
function xxx(){
//......
var jsonData = {
dataType:dataType,
data:data,
clueName:clueName
};
$.ajax({
url:"/dataTranslate",
type:"POST",
dataType:"JSON",
async:false,
data:jsonData,
success:function(res){
console.info(res);
},
error:function(res){
console.error(res);
}
});
//...
}
后端控制层代码
@RequestMapping(value = "/dataTranslate")
public Response dataTranslate(@RequestParam(name="dataType") String dataType,
@RequestParam(name="data") String data,
@RequestParam(name="clueName") String clueName){
//...
return xxxx.getTranslate(dataType,data,clueName);
}
遇到到的bug
-
问题描述
ajax向后台发送请求:HTTP Status 400-Bad Request -
问题原因
2.1 post请求在controller层不能用@RequestParam注解,需要使用@RequestBody去接请求,如果有bean,则使用bean接参数,或者用Map接参数
@RequestParam 对应 Get请求的参数
@RequestBody 对应 Post请求
2.2 ajax请求如果向后端发送的参数是对象的话,需要使用JSON.stringify("...")方法,如果对象里面还包含对象的话,里面的参数也要使用JSON.stringify("...")方法包装。
2.3 ajax请求需要指定contentType类型,否则会报如下错误:
HTTP Status 415 - Unsupported Media Type
小知识:
dataType:指定后端控制层数据返回类型;
contentType:指定前端向后端控制层发送的数据类型
2.4 在控制层方法上没有添加@ResponseBody注解
- 如果没有@ResponseBody,请求会进入后台控制层代码中,但前端会报404
注:因为ajax指定dataType为json,而@ResponseBody注解就是将对象转为json格式的
- 问题解决
3.1前端ajax请求
function xxx(){
//......
var jsonData = {
dataType:dataType,
data:JSON.stringify(data),
clueName:clueName
};
$.ajax({
url:"/dataTranslate",
type:"POST",
dataType:"JSON",
async:false,
contentType:"application/json",
data:JSON.stringify(jsonData),
success:function(res){
console.info(res);
},
error:function(res){
console.error(res);
}
});
//...
}
3.2 后端控制层代码
@RequestMapping(value = "/dataTranslate")
@ResponseBody
public Response dataTranslate(@RequestBody Map<String,String> map){
//...
String dataType = map.get("dataType");
String data = map.get("data");
String clueName = map.get("clueName");
return xxxx.getTranslate(dataType,data,clueName);
}