需求:想要前端做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

找过很多方法,比如:

  1. 使用 JSON.stringify( )序列化,没有效果

    在控制台输出为json对象格式:{"userName":"犹123","password":"123456"}
  2.  使用 qs转换格式,没有效果

    在控制台输出为地址栏格式:userName=%E7%8A%B9123&password=123456
  3. 添加 emulateJSON:true,没有效果
  4. 将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)
	}
})

更改成这样后可以了。。。。

Logo

前往低代码交流专区

更多推荐