Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作實例
更新時間：2023年06月13日 09:12:27 作者：lucky person
這篇文章主要介紹了Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作,結(jié)合實例形式分析了vue基于axios庫post傳送表單json格式數(shù)據(jù)相關(guān)操作實現(xiàn)技巧與注意事項,需要的朋友可以參考下
Vue Axios Post Json
實現(xiàn)步驟：以登錄注冊功能為例
1.后端controller層代碼代碼
我采用的接收形式數(shù)據(jù)是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>
<form>
賬號：<input type="text" name="studentid" v-model="registform.studentid">
密碼：<input type="text" name="password" v-model="registform.password">
用戶名：<input type="text" name="username" v-model="registform.username">
<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。
補(bǔ)充：vue使用axios 發(fā)送post請求的四種方法
寫法一： 后端可以接收到，應(yīng)該是json格式
export const requestLogin = params => { console.log(params);
return $axios.post(`http://192.168.0.105:5846/Home/TestData`,
qs.stringify(params,{ indices: false }),
{ // 這里是跨域?qū)懛?
headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",} // 這里是跨域的寫法
}).then(res => res.data); };寫法二：這樣的方式只能通過輸入流獲取對應(yīng)的json格式，而request.form就會亂碼
export const requestLogin = params => { console.log(params);
return $axios({
method:'POST',
url:'http://192.168.0.105:5846/Home/TestData',
data:params,
transformRequest: [function (data) {
let ret = '{'
for (let it in data) {
ret += ""+ encodeURIComponent(it) + ':' + encodeURIComponent(data[it]) + ','
}
ret+="}"
return ret
}],
headers:{'Content-Type': "application/x-www-form-urlencoded"}
}).then(res => res.data); };寫法三：后端獲取不到參數(shù)
export const requestLogin = params => { console.log(params);
return $axios.post('http://192.168.0.105:5846/Home/TestData',params,
// {headers:{'Access-Control-Allow-Origin': "*"}}
).then(res => res.data); };寫法四：官方寫法 這種方式可以獲取json格式
export const requestLogin = params => { console.log(params);
return $axios({url:'http://192.168.0.105:5846/Home/TestData',
method:'post',
data:params,
headers:{'Content-Type': "application/x-www-form-urlencoded"}}
// {headers:{'Access-Control-Allow-Origin': "*"}}
).then(res => res.data); };相關(guān)文章
Vue3數(shù)字滾動插件vue-countup-v3的使用
vue-countup-v3 插件是一個基于 Vue3 的數(shù)字動畫插件，用于在網(wǎng)站或應(yīng)用程序中創(chuàng)建帶有數(shù)字動畫效果的計數(shù)器，本文主要介紹了Vue3數(shù)字滾動插件vue-countup-v3的使用，感興趣的可以了解一下2023-10-10
這篇文章主要為大家介紹了van-cell如何使用插槽詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-12-12
這篇文章主要介紹了vue中post請求報400的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
示例vue 的keep-alive緩存功能的實現(xiàn)
這篇文章主要介紹了示例vue 的keep-alive緩存功能的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
在Vue3中使用Vue Tour實現(xiàn)頁面導(dǎo)覽
Vue Tour 是一個方便的 Vue.js 插件,它可以幫助我們在網(wǎng)站或應(yīng)用中實現(xiàn)簡單而靈活的頁面導(dǎo)覽功能,本文我們將介紹如何在 Vue 3 中使用 Vue Tour,并通過示例代碼演示其基本用法,需要的朋友可以參考下2024-04-04
Vue3項目頁面實現(xiàn)echarts圖表漸變色的動態(tài)配置的實現(xiàn)步驟
在開發(fā)可配置業(yè)務(wù)平臺時,需要實現(xiàn)讓用戶對項目內(nèi)echarts圖表的動態(tài)配置,讓用戶脫離代碼也能實現(xiàn)簡單的圖表樣式配置,顏色作為圖表樣式的重要組成部分,其配置方式是項目要解決的重點問題,所以本文介紹了Vue3項目頁面實現(xiàn)echarts圖表漸變色的動態(tài)配置2024-10-10
這篇文章主要介紹了nuxtjs中如何對axios二次封裝問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)換膚功能，一套深色，一套淺色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Vue.js之slot深度復(fù)制的相關(guān)資料，文中介紹的很詳細(xì)，對大家具有一定的參考價值，需要的朋友們來一起看看吧。2017-03-03
今天看了vuejs的組件，看到了prop組件，主要作用是在傳入數(shù)據(jù)的時候?qū)魅氲闹底雠袛?，今天小編通過一個小例子給大家分享VueJs組件prop驗證簡單理解，感興趣的朋友一起看看吧2017-09-09