axios发送post请求传到后台,数据后多了一个等号
最近在写前后端分离项目的删除单行数据时,需要由前端发送axios请求,传输数据到后台,后台拿到的数据多了一个等号,百思不得其解,我以为是数据绑定出了问题,筛查后发现并不是绑定的问题,搜集过大量资料后发现是前后端数据传输类型不同的原因。出现问题的前端代码:// 发送ajax请求,请求后台删除指定学号的学生信息axios.post("stuInfo/delete",row.id).then((resp
·
最近在写前后端分离项目的删除单行数据时,需要由前端发送axios请求,传输数据到后台,后台拿到的数据多了一个等号,百思不得其解,我以为是数据绑定出了问题,筛查后发现并不是绑定的问题,搜集过大量资料后发现是前后端数据传输类型不同的原因。
出现问题的前端代码:
// 发送ajax请求,请求后台删除指定学号的学生信息
axios.post("stuInfo/delete",row.id).then((response)=>{
if (response.data.flag){
// 删除成功
this.$message({
message: response.data.message,
type: 'success'
})
}else{
// 删除失败
this.$message.error(response.data.message);
}
}).finally(()=>{
// 重新获取删除后的分页数据
this.searchBtn();
})
出现问题的后端代码:
// 删除指定学号的学生信息
@RequestMapping("/delete")
public Result deleteStuInfo(@RequestBody String id){
try {
int sid = Integer.parseInt(id);
stuInfoService.deleteById(sid);
}catch (Exception e){
e.printStackTrace();
return new Result(false , MessageConstant.DELETE_STU_FAIL);
}
return new Result(true , MessageConstant.DELETE_STU_SUCCESS);
}
}
服务器跑起来,然后点击了删除按钮后进入代码调试。
发现后端接收到的id值后面多了个"="
搜集过大量资料后发现是因为前端发送axios请求时,默认的请求头headers内部的Content-Type是application/x-www-form-urlencoded;charset=UTF-8,这是一种键值对的数据结构,传输过程中把json当作key,而value当作空值,所以传输到后端会多出等号。
需要在发送axios请求时设置请求头headers信息,并把后端接收的数据编码和前端设置统一就可以解决:
解决后的前端代码:
// 发送ajax请求,请求后台删除指定学号的学生信息
axios.post("stuInfo/delete",row.id,{
headers: {
'Content-Type':'application/json'
}
}).then((response)=>{
if (response.data.flag){
// 删除成功
this.$message({
message: response.data.message,
type: 'success'
})
}else{
// 删除失败
this.$message.error(response.data.message);
}
}).finally(()=>{
// 重新获取删除后的分页数据
this.searchBtn();
})
修改后的后端代码:
// 删除指定学号的学生信息
@RequestMapping(value = "/delete",produces = "application/json;charset=UTF-8")//指定接收数据的格式
public Result deleteStuInfo(@RequestBody String id){
try {
int sid = Integer.parseInt(id);
stuInfoService.deleteById(sid);
}catch (Exception e){
e.printStackTrace();
return new Result(false , MessageConstant.DELETE_STU_FAIL);
}
return new Result(true , MessageConstant.DELETE_STU_SUCCESS);
}
修改后的结果:
顺利解决。
更多推荐
已为社区贡献6条内容
所有评论(0)