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