使用vue+axios技术,前端传递data对象数据到后端出现空值问题如何处理?

当前端传递data对象到后端时遇到空值问题,可以检查请求头配置,确保其正确。建议只传递一个参数并尽量避免修改默认配置。通过使用qs库的stringify方法将对象序列化能有效解决这个问题。在前端使用qs.stringify处理对象数据,在后端无需@RequestBody注解也能接收到数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端传递data对象数据到后端出现空值问题如何处理?

1.若出现了问题可以先检查请求头是否对应,若不对应可以改一下请求头,或者是按照默认配置使用(默认配置下就是一致的)
在这里插入图片描述

2.其实传递对象到后端擅自改动配置会出现非常多的编码问题,所以在传递对象数据时,最好只传递一个参数,且改动默认配置越少越好,对于对象类型数据后端不需要加@RequstBody注解也可以顺利得到数据。

出现了空值的时候可以改前端,也可以改后端,这里只改一下前端的编码格式。
修改前端数据格式,由于自定义的data对象数据并不是序列化的,所以我们使用qs中的stringify方法将其序列化再传递到后端

代码如下
前提是要安装qs

//安装qs,听说axios自带qs,这个我不确定,所以特地安装了qs
npm install qs
//导入qs,哪里用就导入在哪里
import qs from 'qs'
//后端正常接受数据测试
@RequestMapping(value="/applicant/updateApplicant",method = RequestMethod.POST)
    public int updateApplicant(Applicant applicant){
        System.out.println(applicant);
        return 1;
    }
//前端方法内使用了qs.stringify()处理出序列化的对象
//http是我自定义的axios的别名,post方法怎么用都无所谓,只要有qs.stringify(this.ApplicantObject)即可
this.$http({
                method: 'post',
                url: "/applicant/updateApplicant",
                data:qs.stringify(this.ApplicantObject)		//重点,这是一个对象数据,且前端在data内自定义的
                ,
            })
            .then((response)=>{
                if(response.data>0){
                    alert("修改成功!");
                    // this.$router.go(-1);
                }    
            })
            .catch(function(error){
                console.log(error);
            })

至此后端数据不为空了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值