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)文章
這篇文章主要介紹了vue cli構(gòu)建的項目中請求代理與項目打包問題,需要的朋友可以參考下2018-02-02
這篇文章主要為大家介紹了vue打包之后配置統(tǒng)一請求地址實現(xiàn)步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了vue3.x中apollo的使用,通過前端自身直接獲取到apollo的配置目前看到官方支持的客戶端是沒有vue的，本文給大家介紹了前端獲取到apollo數(shù)據(jù)的過程，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了解決vant-UI庫修改樣式無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了Vue+Element-U實現(xiàn)分頁顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章分享一個比較有意思的東西，那就是Vue中如何實現(xiàn)cache緩存的，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-07-07
本文通過實例給大家介紹了Vue中使用webpack別名的方法,非常不錯，具體一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
在 Vue 中,組件是構(gòu)建用戶界面的基礎(chǔ),而動態(tài)組件的引入,更是讓開發(fā)者能夠在應(yīng)用中實現(xiàn)靈活、可重用的視圖邏輯,本文將探討 Vue 3 中的動態(tài)組件,分享其使用場景,并通過示例代碼來說明其操作方法,需要的朋友可以參考下2025-01-01
目前前端最流行的網(wǎng)絡(luò)請求庫還是axios,所以對axios的封裝很有必要,下面這篇文章主要給大家介紹了關(guān)于vue3中封裝Axios請求及在組件中使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue中路由跳轉(zhuǎn)的多種方式(和$router下路由跳轉(zhuǎn)的那幾個方法的區(qū)別)
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來實現(xiàn)路由跳轉(zhuǎn),本文給大家分享vue中路由跳轉(zhuǎn)的幾種方式（和$router下路由跳轉(zhuǎn)的那幾個方法的區(qū)別）,感興趣的朋友一起看看吧2023-11-11