vue中使用$http.post請求傳參的錯誤及解決
使用$http.post請求傳參的錯誤
在使用$http請求后臺,照常我們在后端 使用注解@PostMapper或者 @RequestMapping(value = “XXXX”,method = RequestMethod.POST)接受請求
handleAdd(node) { this.$http.post("/item/category/addCategory",{ node:node }) .then(({data})=>{ this.$emit("close"); this.$message.success("添加成功!"); }).catch(() => { this.$message.error("添加失敗!"); }); }
結(jié)果報了一個’GET’的錯誤,我就很納悶。并沒有寫get方法,那必定會出錯。
截圖奉上==
傳遞的是json對象而不是數(shù)組。
還好之前有過post傳遞參數(shù)的項目之后又搜了一下,
如下面這種
handleAdd(node) { this.$http({ method:'post', url:'/item/category/addCategory', data: node }).then(({data})=>{ this.$emit("close"); this.$message.success("添加成功!"); }).catch(() => { this.$message.error("添加失??!"); }); }
整體上沒有問題
之后我有嘗試了一下
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請求之坑
最近用的vue請求數(shù)據(jù),坑死,還是對前端vue框架不熟。
與后端通信有問題,要么是json加入到url有問題、要么是json解析有問題。
解決方法
1、請求參數(shù)一個用url傳
?var json=[{"msg”:“123"}]; ?var temp=encodeURI(JSON.stringify(json)); ? ? ?//重點 ?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、一個用data包裝傳
var Data=[{}] var url = "http://111.111.111.111:8080/web/data"; var params = new URLSearchParams(); params.append("operations", JSON.stringify(Data)); ? ? ? ? ? //重點 // params.append('param2', 'value2'); that.$axios.post(url, params) ? ? .then(response => { ? ? ? ? // post 成功,response.data 為返回的數(shù)據(jù) ? ? ? ? console.log(response.data) ? ? }) ? ? .catch(error => { ? ? ? ? // 請求失敗 ? ? ? ? console.log(error) ? ? })
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vuex中store存儲store.commit和store.dispatch的用法
這篇文章主要介紹了vuex中store存儲store.commit和store.dispatch的用法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue-cli項目根據(jù)線上環(huán)境分別打出測試包和生產(chǎn)包
這篇文章主要介紹了vue-cli項目根據(jù)線上環(huán)境打出測試包和生產(chǎn)包的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05Vue單頁式應(yīng)用(Hash模式下)實現(xiàn)微信分享的實例
本篇文章介紹了Vue單頁式應(yīng)用(Hash模式下)實現(xiàn)微信分享的實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07vue-resource + json-server模擬數(shù)據(jù)的方法
本篇文章主要介紹了vue-resource + json-server模擬數(shù)據(jù)的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11