vue的axios使用post時(shí)必須使用qs.stringify而get不用問(wèn)題
問(wèn)題
vue里代碼如下：
this.$http.post('/getMatterList.do',{"matterIds":"1,2,3"})
.then((res)=>{
console.log(res);
})
axios官方文檔都這么示范的，仔細(xì)看下瀏覽器里發(fā)出去的請(qǐng)求
傳送參數(shù)的形式不是form-data，而是Request Payload。
只要做兩步設(shè)置就可以解決了
用Qs.stringify()將對(duì)象序列化成URL的形式，Qs是axios里面自帶的，所以直接引入就可以了
設(shè)置請(qǐng)求頭里的’Content-Type’為’application/x-www-form-urlencoded’
import Qs from 'qs'
var data = Qs.stringify({"matterIds":"1,2,3"});
this.$http.post('/getMatterList.do',data, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((res)=>{
console.log(res)
})
改完之后再來(lái)看下，問(wèn)題已經(jīng)解決了
原因
HTTP請(qǐng)求中的get請(qǐng)求和post請(qǐng)求參數(shù)的存放位置是不一樣的，get請(qǐng)求的參數(shù)以鍵值對(duì)的方式跟在url后面的，而post請(qǐng)求的參數(shù)是以鍵值對(duì)的方式在請(qǐng)求體里的
get請(qǐng)求
post請(qǐng)求
為何要設(shè)置請(qǐng)求頭里的’Content-Type’
使用不同請(qǐng)求方式時(shí)，參數(shù)的傳輸方式是不一樣的，但是服務(wù)端在取接口的請(qǐng)求參數(shù)時(shí)，用的方法其實(shí)卻是一樣的，都是使用request.getParameter(key)來(lái)獲取，其實(shí)是因?yàn)閠omcat在中間會(huì)對(duì)請(qǐng)求參數(shù)進(jìn)行解析處理，處理完把解析出來(lái)的表單參數(shù)放在request parameter map中，所以后端就可以通過(guò)request.getParameter(key)來(lái)統(tǒng)一獲取數(shù)據(jù)，而tomcat解析的時(shí)候是通過(guò)’contentType’來(lái)知道當(dāng)前的請(qǐng)求是post請(qǐng)求，當(dāng)’contentType’為"application/x-www-form-urlencoded",它才會(huì)去讀取請(qǐng)求體數(shù)據(jù)。
為何要用Qs.stringify()將對(duì)象序列化成URL的形式：
post請(qǐng)求參數(shù)是以鍵值對(duì)的形式存在請(qǐng)求體里，用Qs.stringify()就是把傳入的對(duì)象轉(zhuǎn)換為鍵值對(duì)。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE前端實(shí)現(xiàn)token的無(wú)感刷新3種方案(refresh_token)
這篇文章主要給大家介紹了關(guān)于VUE前端實(shí)現(xiàn)token的無(wú)感刷新3種方案(refresh_token)的相關(guān)資料,為了提供更好的用戶(hù)體驗(yàn),我們可以通過(guò)實(shí)現(xiàn)Token的無(wú)感刷新機(jī)制來(lái)避免用戶(hù)在使用過(guò)程中的中斷,需要的朋友可以參考下2023-11-11
這篇文章主要給大家介紹了關(guān)于如何在寶塔面板部署vue項(xiàng)目的相關(guān)資料,寶塔面板可以通過(guò)Nginx來(lái)部署Vue項(xiàng)目,并解決跨域問(wèn)題,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
vue3+vite中使用import.meta.glob的操作代碼
在vue2的時(shí)候，我們一般引入多個(gè)js或者其他文件，一般使用? require.context 來(lái)引入多個(gè)不同的文件，但是vite中是不支持 require的，他推出了一個(gè)功能用import.meta.glob來(lái)引入多個(gè)，單個(gè)的文件，下面通過(guò)本文介紹vue3+vite中使用import.meta.glob,需要的朋友可以參考下2022-11-11
Vue中的assets和static目錄:使用場(chǎng)景及區(qū)別說(shuō)明
這篇文章主要介紹了Vue中的assets和static目錄:使用場(chǎng)景及區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue項(xiàng)目中掃碼支付的實(shí)現(xiàn)示例(附demo)
本文主要介紹了vue項(xiàng)目中掃碼支付的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了淺談Vue 自動(dòng)化部署打包上線(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue-DPlayer是一個(gè)易于使用、高性能的基于Vue.js的視頻播放器組件,本文給大家介紹Vue DPlayer詳細(xì)使用,本文將從四個(gè)方面對(duì)Vue-DPlayer進(jìn)行詳細(xì)的闡述,感興趣的朋友一起看看吧2023-10-10
Vue結(jié)合ElementUI實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求和頁(yè)面跳轉(zhuǎn)功能(最新推薦)
我們?cè)赑roflie.vue實(shí)例中,有beforeRouteEnter、beforeRouteLeave兩個(gè)函數(shù)分別是進(jìn)入路由之前和離開(kāi)路由之后,我們可以在這兩個(gè)函數(shù)之內(nèi)進(jìn)行數(shù)據(jù)的請(qǐng)求,下面給大家分享Vue結(jié)合ElementUI實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求和頁(yè)面跳轉(zhuǎn)功能,感興趣的朋友一起看看吧2024-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簽到日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
Vue2.x中的父子組件相互通信的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue2.x中的父子組件相互通信,需要的朋友可以參考下2017-05-05