axios传值的方式

注意:前端怎么传值,后端就用什么拿值,一一对应。

get 方式

1
2
3
4
5
6
7
8
9
this.$axios
.get("http://localhost:8081/users/", {
// data()中的queryInfo对象
params: this.queryInfo
})
.then(res => {
if (res.data.code === 200) {
}
});

post 方式

  • 方式一:但是兼容性不好,在 ie 浏览器没用
1
2
3
4
5
6
var params = new URLSearchParams();
params.append("name", this.addUserForm.name);
// params.append("userInfo", this.addUserForm);尝试拼接对象,但是在f12后的xhr中,传值仅仅显示是对象,后端拿不到值
this.$axios
.post("http://localhost:8081/users/add?", params)
.then(response => (this.Datas = response.data.json.userMaps));
  • 方式二:
    在 main.js 中引入 axios 中自带的:

import Qs from ‘qs’
Vue.prototype.qs = Qs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const params = this.qs.stringify({
id: this.addUserForm.id,
name: this.addUserForm.name
});
this.$axios
.post("http://localhost:8081/users/add", params)
.then(success => {
if (success.data.code === 200) {
this.editDialogVisible = false;
this.getUserList();
}
})
.catch(err => {
this.$message.error("添加失败:" + err);
});

put 方式

方式一:直接传值,不推荐
这种是前面怎么修改,值后端都是不能获取到,但是现在可以跟 post 的方式二一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
this.$axios
.put(
`http://localhost:8081/users/changeStatus?id=${userInfo.id}&status=${userInfo.status}`
)
.then(res => {
if (res.data.code === 200) {
this.$message.success("更新状态成功");
// 重新获取数据
this.getUserList();
}
})
.catch(err => {
return this.$message.error(`更新状态失败:${err}`);
});

delete 方式

1
2
3
4
5
6
7
8
this.$axios
.delete("http://localhost:8081/users/delete", {
params: {
userId: userId
}
})
.then(success => {
});
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信