向后端传对象与传普通字符串/字段的区别:
1. 传对象首先要将对象格式转化为JSON格式,即JSON.stringify(_this.user),
2. 然后将其直接赋给data,即data: JSON.stringify(_this.user)。
此时不需要用到**Qs**库的方法:
Qs.stringify({ }),
最后,一定要加**headers**,才有效!即:
headers: {
'Content-Type': 'application/json;charset=utf-8'
大家可以基于我的[上一篇博客](javascript:void(0)),
修改script部分的Vue核心程序段,从而得到前后端交互传递对象的前端代码:
var app = new Vue({
el: '#app',
data: {
message: 'okay',
user: {
userName: 'Sun',
password: '123',
value: 0
methods: {
send: function () {
var _this = this;
// console.log(JSON.stringify(_this.user))
axios({
method: 'post',
url: "http://localhost:8080/Sun_war_exploded/judge",
headers: {
'Content-Type': 'application/json;charset=utf-8'
// data: Qs.stringify({
// message: _this.message
// user: JSON.stringify(_this.user)
// }),
data: JSON.stringify(_this.user),
// responseType: 'json'
}).then (function (response) {
console.log(response.data);
_this.message = response.data;
_this.value = response.data;
}).catch (function (error) {
console.log(error.data);
_this.message = error.data;
computed: {
@RequestMapping(value = "/judge", method = RequestMethod.POST)
@ResponseBody
public String judge(@RequestBody User user) {
List<User> list = userDao.selectAllUser();
System.out.println(user);
System.out.println(user.getUserName());
System.out.println(user.getPassword());
for (User per : list) {
if (per.getUserName().equals(user.getUserName()) && per.getPassword().equals(user.getPassword())) {
return "1";
return "-1";
后端传对象与传参,基本无异。
需要说明的是:
@RequestBody会直接将传入的json格式数据转为对应种类的JavaBean实体类。
返回响应给前端时,只要标记了@ResponseBody注解后,直接return就好。