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。
只要做兩步設(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ù)的傳輸方式是不一樣的，但是服務端在取接口的請求參數(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()就是把傳入的對象轉(zhuǎn)換為鍵值對。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于在vue2中使用weixin-js-sdk的詳細步驟
公司最近有微信公眾號的需求,那么微信登錄授權(quán)和如何使用WX-JSSDk實現(xiàn)分享等等肯定是最頭疼的問題,這篇文章主要給大家介紹了關(guān)于在vue2中使用weixin-js-sdk的詳細步驟,需要的朋友可以參考下2024-07-07
Vue?echarts實例項目商家銷量統(tǒng)計圖實現(xiàn)詳解
Echarts，它是一個與框架無關(guān)的?JS?圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用，因為我的習慣，每次新嘗試做一個功能的時候，總要新創(chuàng)建個小項目，做做Demo2022-09-09
Vue.js與 ASP.NET Core 服務端渲染功能整合
本文通過案例給大家詳細分析了ASP.NET Core 與 Vue.js 服務端渲染,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了vue過濾器用法,結(jié)合實例形式總結(jié)分析了vue.js常見過濾器相關(guān)使用技巧與操作注意事項,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了vue.js 實現(xiàn)點擊div標簽時改變樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue中的MVVM原理和實現(xiàn)方法，文中講解非常細致，幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了7個實用的Vue開發(fā)技巧文。中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，下面我們來一起學習一下吧2019-05-05
下面小編就為大家分享一篇vue2.0 自定義 餅狀圖 (Echarts)組件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue實現(xiàn)錄制屏幕功能并本地保存,這里用的是用的是HBuilder?X開發(fā)，結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-04-04
這篇文章主要給大家介紹了關(guān)于element的表單組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-02-02