第一次接触vue,使用this.$http与后台交互发现传回参数为null,比较傻缺
【说明:这里为解决过程,可以直接拉到最后看解决办法。】需求:想要前端做post请求到后台,并传递实体参数。最开始代码:this.$http({method:'post',url:this.$serverUrl+'/OvervoltageMonitorSys_war_exploded/userC/login',data:{userName: this.login.accountName,passwo
·
需求:想要前端做post请求到后台,并传递实体参数。
最开始代码:
this.$http({
method:'post',
url:this.$serverUrl+'/OvervoltageMonitorSys_war_exploded/userC/login',
data:{
userName: this.login.accountName,
password: this.login.password,
}
}).then((data)=>{
var result=data.body
if(result.code==200){
this.$message.success('登录成功,即将跳转至主页')
this.$router.replace('/main/home')
}else{
this.$message.error(result.msg)
}
})
原本控制台输出为对象格式:
结果:后台接收到的参数为null
找过很多方法,比如:
- 使用 JSON.stringify( )序列化,没有效果
在控制台输出为json对象格式:{"userName":"犹123","password":"123456"} - 使用 qs转换格式,没有效果
在控制台输出为地址栏格式:userName=%E7%8A%B9123&password=123456 - 添加 emulateJSON:true,没有效果
- 将data改成params,有效果,后台能接收到数据,但是这样改成了url传参,违背不显示参数的初衷
后面我发现,我找的这些解决办法中,大多数的请求都不像我这么写的this.$http({method:'post',...}),都是这样的:this.$http.post(...) ,
但我没去细琢磨这两者的区别,有谁看到知道的回复一下。
【之前一直用jQuery的ajax,在jQuery中两者的作用是一样,所以我自我以为在vue中vue-resource也没有什么差别】
this.$http.post(
this.$serverUrl+'/OvervoltageMonitorSys_war_exploded/userC/login',
{
userName: this.login.accountName,
password: this.login.password,
},
{emulateJSON:true},//必写
{'header': {'Content-Type': 'application/json;charset=UTF-8'}}
).then((data)=>{
var result=data.body
if(result.code==200){
this.$message.success('登录成功,即将跳转至主页')
this.$router.replace('/main/home')
}else{
this.$message.error(result.msg)
}
})
更改成这样后可以了。。。。
更多推荐
已为社区贡献1条内容
所有评论(0)