Vue使用axios用post方式将表单中的数据以json格式提交给后端接收
Vue Axios Post Json
实现步骤：以登录注册功能为例
1.后端controller层代码代码
我采用的接收形式数据是json格式
@PostMapping("/login")
public Resp login(@RequestBody User user){
User login = userService.login(user.getStudentid(),user.getPassword());
return Resp.success(login);
}
@PostMapping("/regist")
public Resp regist(@RequestBody User user){
userService.regist(user);
return Resp.success(null);
}
2.前端登录注册界面代码
<body>
<div id="app">
<form>
账号：<input type="text" name="studentid" v-model="registform.studentid"><br>
密码：<input type="text" name="password" v-model="registform.password"><br>
用户名：<input type="text" name="username" v-model="registform.username"><br>
<input type="button" value="denglu" @click="tologin">
</form>
</div>
</body>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
var vue = new Vue({
el:"#app",
data:{
registform:{
studentid: "12345678",
password: "123456",
// username:"qwq"
}
},
methods:{
tologin:function(){
let datata = this.registform;
console.log("通了");
axios.post("/user/login",datata).then(function(response){
console.log(response.data);
})
}
}
})
</script>
3.遇到的问题：
3.1. 我们首先在Vue data中定义一个存放表单数据的registform{}，然后给它添加上属性，在表单input处使用v-model绑定。
3.2. 接下来将registform保存到datata变量中，然后就是axios的发送请求了。格式为axios.post(“url”,{data}),此处为什么我们没有使用括号，而是直接使用的datatta，因为我们的registform外面已经有一层括号了，再加接收就要报错了。
使用axios发送get请求都是传递param，发送post请求都是传递data。
向这位大佬学习：http://t.csdn.cn/irwvx