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