最近在写前后端分离项目的删除单行数据时,需要由前端发送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);
}

修改后的结果:
在这里插入图片描述
顺利解决。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐