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.遇到的問(wèn)題：
3.1. 我們首先在Vue data中定義一個(gè)存放表單數(shù)據(jù)的registform{}，然后給它添加上屬性，在表單input處使用v-model綁定。
3.2. 接下來(lái)將registform保存到datata變量中，然后就是axios的發(fā)送請(qǐng)求了。格式為axios.post(“url”,{data}),此處為什么我們沒(méi)有使用括號(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); };寫法二：這樣的方式只能通過(guò)輸入流獲取對(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)文章
Vue3數(shù)字滾動(dòng)插件vue-countup-v3的使用
vue-countup-v3 插件是一個(gè)基于 Vue3 的數(shù)字動(dòng)畫插件，用于在網(wǎng)站或應(yīng)用程序中創(chuàng)建帶有數(shù)字動(dòng)畫效果的計(jì)數(shù)器，本文主要介紹了Vue3數(shù)字滾動(dòng)插件vue-countup-v3的使用，感興趣的可以了解一下2023-10-10
這篇文章主要為大家介紹了van-cell如何使用插槽詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-12-12
vue中post請(qǐng)求報(bào)400的解決方案
這篇文章主要介紹了vue中post請(qǐng)求報(bào)400的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
示例vue 的keep-alive緩存功能的實(shí)現(xiàn)
這篇文章主要介紹了示例vue 的keep-alive緩存功能的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
在Vue3中使用Vue Tour實(shí)現(xiàn)頁(yè)面導(dǎo)覽
Vue Tour 是一個(gè)方便的 Vue.js 插件,它可以幫助我們?cè)诰W(wǎng)站或應(yīng)用中實(shí)現(xiàn)簡(jiǎn)單而靈活的頁(yè)面導(dǎo)覽功能,本文我們將介紹如何在 Vue 3 中使用 Vue Tour,并通過(guò)示例代碼演示其基本用法,需要的朋友可以參考下2024-04-04
Vue3項(xiàng)目頁(yè)面實(shí)現(xiàn)echarts圖表漸變色的動(dòng)態(tài)配置的實(shí)現(xiàn)步驟
在開(kāi)發(fā)可配置業(yè)務(wù)平臺(tái)時(shí),需要實(shí)現(xiàn)讓用戶對(duì)項(xiàng)目?jī)?nèi)echarts圖表的動(dòng)態(tài)配置,讓用戶脫離代碼也能實(shí)現(xiàn)簡(jiǎn)單的圖表樣式配置,顏色作為圖表樣式的重要組成部分,其配置方式是項(xiàng)目要解決的重點(diǎn)問(wèn)題,所以本文介紹了Vue3項(xiàng)目頁(yè)面實(shí)現(xiàn)echarts圖表漸變色的動(dòng)態(tài)配置2024-10-10
這篇文章主要介紹了nuxtjs中如何對(duì)axios二次封裝問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)換膚功能，一套深色，一套淺色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Vue.js之slot深度復(fù)制的相關(guān)資料，文中介紹的很詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們來(lái)一起看看吧。2017-03-03
今天看了vuejs的組件，看到了prop組件，主要作用是在傳入數(shù)據(jù)的時(shí)候?qū)魅氲闹底雠袛?，今天小編通過(guò)一個(gè)小例子給大家分享VueJs組件prop驗(yàn)證簡(jiǎn)單理解，感興趣的朋友一起看看吧2017-09-09