axios发送post请求传到后台,数据后多了一个等号

最近在写前后端分离项目的删除单行数据时,需要由前端发送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
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

近景_

打赏拉满,动力满满

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值