Vue Axios Post Json
實現(xiàn)步驟：以登錄注冊功能為例
1.后端controller層代碼代碼
我采用的接收形式數(shù)據(jù)是json格式文章來源：http://www.zghlxwxcb.cn/news/detail-427104.html
@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中定義一個存放表單數(shù)據(jù)的registform{}，然后給它添加上屬性，在表單input處使用v-model綁定。
3.2. 接下來將registform保存到datata變量中，然后就是axios的發(fā)送請求了。格式為axios.post(“url”,{data}),此處為什么我們沒有使用括號，而是直接使用的datatta，因為我們的registform外面已經(jīng)有一層括號了，再加接收就要報錯了。
使用axios發(fā)送get請求都是傳遞param，發(fā)送post請求都是傳遞data。
向這位大佬學(xué)習(xí)：http://t.csdn.cn/irwvx文章來源地址http://www.zghlxwxcb.cn/news/detail-427104.html
到了這里，關(guān)于Vue使用axios用post方式將表單中的數(shù)據(jù)以json格式提交給后端接收的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
