Recently, when writing the deletion of a single line of data for a front-end separation project, the front-end needs to send an axios request to transfer the data to the background, and the data obtained by the background has an extra equal sign, which is puzzling. I thought it was data binding. The problem, after screening, it was found that it was not a binding problem. After collecting a large amount of data, it was found that the reason for the different types of data transmission between the front and back ends.
The problematic front-end code:
// 发送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();
})
The backend code where the problem occurs:
// 删除指定学号的学生信息
@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);
}
}
The server runs, and then enters code debugging after clicking the delete button.
It was found that there was an extra "=" after the id value received by the backend.
After collecting a lot of information, it was found that when the frontend sent an axios request, the default Content-Type in the headers of the request header was application/x-www-form-urlencoded; charset=UTF-8, this is a data structure of key-value pairs. During the transmission process, json is regarded as a key, and the value is regarded as a null value, so there will be an extra equal sign when transmitted to the backend.
It is necessary to set the request header headers information when sending an axios request, and unify the data encoding received by the backend with the frontend settings to solve the problem:
Solved front-end code:
// 发送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();
})
Modified backend code:
// 删除指定学号的学生信息
@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);
}
Modified result:
resolved smoothly.