vue中使用$http.post請(qǐng)求傳參的錯(cuò)誤及解決
使用$http.post請(qǐng)求傳參的錯(cuò)誤
在使用$http請(qǐng)求后臺(tái),照常我們?cè)诤蠖?使用注解@PostMapper或者 @RequestMapping(value = “XXXX”,method = RequestMethod.POST)接受請(qǐng)求
handleAdd(node) {
this.$http.post("/item/category/addCategory",{
node:node
})
.then(({data})=>{
this.$emit("close");
this.$message.success("添加成功!");
}).catch(() => {
this.$message.error("添加失??!");
});
}
結(jié)果報(bào)了一個(gè)’GET’的錯(cuò)誤,我就很納悶。并沒(méi)有寫(xiě)get方法,那必定會(huì)出錯(cuò)。

截圖奉上==

傳遞的是json對(duì)象而不是數(shù)組。
還好之前有過(guò)post傳遞參數(shù)的項(xiàng)目之后又搜了一下,
如下面這種
handleAdd(node) {
this.$http({
method:'post',
url:'/item/category/addCategory',
data: node
}).then(({data})=>{
this.$emit("close");
this.$message.success("添加成功!");
}).catch(() => {
this.$message.error("添加失?。?);
});
}
整體上沒(méi)有問(wèn)題

之后我有嘗試了一下
handleAdd(node) {
this.$http.post("/item/category/addCategory",{
node:this.$qs.stringify(node)
})
.then(({data})=>{
this.$emit("close");
this.$message.success("添加成功!");
}).catch(() => {
this.$message.error("添加失?。?);
});
}
傳遞的結(jié)果

三種方式都可以使用,但我只有第二種方式成功啦。
vue post請(qǐng)求之坑
最近用的vue請(qǐng)求數(shù)據(jù),坑死,還是對(duì)前端vue框架不熟。
與后端通信有問(wèn)題,要么是json加入到url有問(wèn)題、要么是json解析有問(wèn)題。
解決方法
1、請(qǐng)求參數(shù)一個(gè)用url傳
?var json=[{"msg”:“123"}];
?var temp=encodeURI(JSON.stringify(json)); ? ? ?//重點(diǎn)
?var urls="http://202.114.207.232:8080/web/data?operations="+temp;
? ? ? ? ? ? this.$axios({type:'post',url:urls, dataType:'json' }).then( res => { console.log(res) }).catch( e => { console.info(e) })2、一個(gè)用data包裝傳
var Data=[{}]
var url = "http://111.111.111.111:8080/web/data";
var params = new URLSearchParams();
params.append("operations", JSON.stringify(Data)); ? ? ? ? ? //重點(diǎn)
// params.append('param2', 'value2');
that.$axios.post(url, params)
? ? .then(response => {
? ? ? ? // post 成功,response.data 為返回的數(shù)據(jù)
? ? ? ? console.log(response.data)
? ? })
? ? .catch(error => {
? ? ? ? // 請(qǐng)求失敗
? ? ? ? console.log(error)
? ? })以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vuex中store存儲(chǔ)store.commit和store.dispatch的用法
這篇文章主要介紹了vuex中store存儲(chǔ)store.commit和store.dispatch的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue-cli項(xiàng)目根據(jù)線上環(huán)境分別打出測(cè)試包和生產(chǎn)包
這篇文章主要介紹了vue-cli項(xiàng)目根據(jù)線上環(huán)境打出測(cè)試包和生產(chǎn)包的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
Vue單頁(yè)式應(yīng)用(Hash模式下)實(shí)現(xiàn)微信分享的實(shí)例
本篇文章介紹了Vue單頁(yè)式應(yīng)用(Hash模式下)實(shí)現(xiàn)微信分享的實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
vue路由傳參頁(yè)面刷新參數(shù)丟失問(wèn)題解決方案
這篇文章主要介紹了vue路由傳參頁(yè)面刷新參數(shù)丟失問(wèn)題解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
vue-resource + json-server模擬數(shù)據(jù)的方法
本篇文章主要介紹了vue-resource + json-server模擬數(shù)據(jù)的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11

