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