Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作實(shí)例
更新時(shí)間：2023年06月13日 09:12:27 作者：lucky person
這篇文章主要介紹了Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作,結(jié)合實(shí)例形式分析了vue基于axios庫(kù)post傳送表單json格式數(shù)據(jù)相關(guān)操作實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下
Vue Axios Post Json
實(shí)現(xiàn)步驟：以登錄注冊(cè)功能為例
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.前端登錄注冊(cè)界面代碼
<body>
<div>
<form>
賬號(hào)：<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中定義一個(gè)存放表單數(shù)據(jù)的registform{}，然后給它添加上屬性，在表單input處使用v-model綁定。
3.2. 接下來將registform保存到datata變量中，然后就是axios的發(fā)送請(qǐng)求了。格式為axios.post(“url”,{data}),此處為什么我們沒有使用括號(hào)，而是直接使用的datatta，因?yàn)槲覀兊膔egistform外面已經(jīng)有一層括號(hào)了，再加接收就要報(bào)錯(cuò)了。
使用axios發(fā)送get請(qǐng)求都是傳遞param，發(fā)送post請(qǐng)求都是傳遞data。
補(bǔ)充：vue使用axios 發(fā)送post請(qǐng)求的四種方法
寫法一： 后端可以接收到，應(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); };寫法二：這樣的方式只能通過輸入流獲取對(duì)應(yīng)的json格式，而request.form就會(huì)亂碼
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)建的項(xiàng)目中請(qǐng)求代理與項(xiàng)目打包問題
這篇文章主要介紹了vue cli構(gòu)建的項(xiàng)目中請(qǐng)求代理與項(xiàng)目打包問題,需要的朋友可以參考下2018-02-02
vue打包之后配置統(tǒng)一請(qǐng)求地址步驟詳解
這篇文章主要為大家介紹了vue打包之后配置統(tǒng)一請(qǐng)求地址實(shí)現(xiàn)步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了vue3.x中apollo的使用,通過前端自身直接獲取到apollo的配置目前看到官方支持的客戶端是沒有vue的，本文給大家介紹了前端獲取到apollo數(shù)據(jù)的過程，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了解決vant-UI庫(kù)修改樣式無效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue+Element-U實(shí)現(xiàn)分頁(yè)顯示效果
這篇文章主要為大家詳細(xì)介紹了Vue+Element-U實(shí)現(xiàn)分頁(yè)顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
詳解Vue中是如何實(shí)現(xiàn)cache緩存的
這篇文章分享一個(gè)比較有意思的東西，那就是Vue中如何實(shí)現(xiàn)cache緩存的，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-07-07
本文通過實(shí)例給大家介紹了Vue中使用webpack別名的方法,非常不錯(cuò)，具體一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
Vue3的動(dòng)態(tài)組件使用場(chǎng)景與示例
在 Vue 中,組件是構(gòu)建用戶界面的基礎(chǔ),而動(dòng)態(tài)組件的引入,更是讓開發(fā)者能夠在應(yīng)用中實(shí)現(xiàn)靈活、可重用的視圖邏輯,本文將探討 Vue 3 中的動(dòng)態(tài)組件,分享其使用場(chǎng)景,并通過示例代碼來說明其操作方法,需要的朋友可以參考下2025-01-01
目前前端最流行的網(wǎng)絡(luò)請(qǐng)求庫(kù)還是axios,所以對(duì)axios的封裝很有必要,下面這篇文章主要給大家介紹了關(guān)于vue3中封裝Axios請(qǐng)求及在組件中使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue中路由跳轉(zhuǎn)的多種方式(和$router下路由跳轉(zhuǎn)的那幾個(gè)方法的區(qū)別)
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來實(shí)現(xiàn)路由跳轉(zhuǎn),本文給大家分享vue中路由跳轉(zhuǎn)的幾種方式（和$router下路由跳轉(zhuǎn)的那幾個(gè)方法的區(qū)別）,感興趣的朋友一起看看吧2023-11-11