Vue+axios向后端post JSON数据,不使用QS格式化实现方式(后端使用@RequestBody接收参数)
axios向后端post请求时出现400,debug发现jquery的ajax请求和axios的post请求默认的请求头不一样(Content-Type)。
jquery的post请求:
axios的post请求:
按照度娘所说,可以设置axios的请求头。
//提交更新用户
updateUser:function(){
//保存this
let that = this;
if(this.userUpdateInfo.uname == '' || this.userUpdateInfo.upwd == ''){
alert("用户名和密码不得为空!")
}else {
this.userUpdateInfo.usex = $("input[name='updateusersex']:checked").val();
axios.post('/user/update',this.userUpdateInfo,{headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}})
// axios.post('/user/update',this.userUpdateInfo)
.then(function (response) {
// console.log(response);
that.userUpdateIsShow = false;
if (response.data != "" && response.data == "success"){
alert("信息更新成功");
if (that.showPos == 4){
that.getUserListAll();
}else {
that.getUserList(that.UserID);
}
}else{
alert("信息更新失败");
}
},function (err) {
console.log(err);
})
}
},
请求头成功改变,但数据默认被格式化(结尾默认会存在’:’),后台用*@RequestParam*无法正常读取参数,应该是要用qs.stringify格式化后就没有问题了(stringify方法可以将一个json对象直接转为:以?和&符连接的形式),由于没有打算深入学习前端的计划,vue是直接引用的,没学会怎么import qs,就在尝试其他方法格式化数据。
(按照qs.stringify的格式手动从外层打包一下数据应该也可以实现,于是就有了方法一)
方法一:(利用连接符格式化对象,不用改变后台接口)
因为使用qs.stringify格式化后,POST的JSON对象就可以被后台读取了,那为了去除格式化后的’ : ',那直接手动格式化它就好了。
像这样:let data = "ObjectUser=" + JSON.stringify(this.userUpdateInfo);
发送的时候直接这样:axios.post('/user/updateUser',data,{headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}})
嗯,把请求头设置成与jquery的ajax一样的,稍微格式化一下,后台接收到的参数就跟jquery发送的ajax请求数据一毛一样了。
放一下代码吧,毕竟尝试了半天。
axios的POST请求:
//提交更新用户
updateUser:function(){
//保存this
let that = this;
if(this.userUpdateInfo.uname == '' || this.userUpdateInfo.upwd == ''){
alert("用户名和密码不得为空!")
}else {
this.userUpdateInfo.usex = $("input[name='updateusersex']:checked").val();
let data = "ObjectUser=" + JSON.stringify(this.userUpdateInfo);
axios.post('/user/updateUser',data,{headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}})
.then(function (response) {
// console.log(response);
that.userUpdateIsShow = false;
if (response.data != "" && response.data == "success"){
alert("信息更新成功");
if (that.showPos == 4){
that.getUserListAll();
}else {
that.getUserList(that.UserID);
}
}else{
alert("信息更新失败");
}
},function (err) {
console.log(err);
})
}
},
后台接收参数:(咳咳,这个后台写的比较早,凑合看,表嫌弃)
// 更新用户信息
@RequestMapping("/user/updateUser")
@ResponseBody
public String updateUser(@RequestParam String ObjectUser){
JSONObject JsonUser = JSONObject.fromObject(ObjectUser);
User user = new User();
user.setUid(JsonUser.getInt("uid"));
user.setUname(JsonUser.getString("uname"));
user.setUpwd(JsonUser.getString("upwd"));
user.setUtext(JsonUser.getString("utext"));
user.setUsex(JsonUser.getString("usex"));
int result = userService.UpdateUser(user);
if (result != 0){
return "success";
}else{
return "";
}
}
方法二:(改用@RequestBody接收,前端默认依然使用json格式发送)
后端改用@RequestBody接收后,前端直接axios.post(’/user/update’,this.userUpdateInfo),把前端的Object塞进去就好了
前端axios POST:
//提交更新用户
updateUser:function(){
//保存this
let that = this;
if(this.userUpdateInfo.uname == '' || this.userUpdateInfo.upwd == ''){
alert("用户名和密码不得为空!")
}else {
this.userUpdateInfo.usex = $("input[name='updateusersex']:checked").val();
axios.post('/user/update',this.userUpdateInfo)
.then(function (response) {
// console.log(response);
that.userUpdateIsShow = false;
if (response.data != "" && response.data == "success"){
alert("信息更新成功");
if (that.showPos == 4){
that.getUserListAll();
}else {
that.getUserList(that.UserID);
}
}else{
alert("信息更新失败");
}
},function (err) {
console.log(err);
})
}
},
后端的@RequestBody
//更新用户信息
@RequestMapping("/user/update")
@ResponseBody
public String updateUser(@RequestBody User user){
int result = userService.UpdateUser(user);
if (result != 0){
return "success";
}else {
return "";
}
}
方法三:(content-type设为:text/plain,感觉靠谱,正在实现)
content-type设为:text/plain,数据可以正常格式化,接口暂时未能正常响应。大家可以尝试一下
关于qs.stringify()和JSON.stringify()
let a = {name:'bb',age:88};
qs.stringify(a)
// 'name=bb&age=88'
JSON.stringify(a)
// '{"name":"bb","age":88}'