快捷導(dǎo)航

vue中使用$http.post請(qǐng)求傳參的錯(cuò)誤及解決

更新時(shí)間：2022年04月08日 08:48:00 作者：B–rabbit

這篇文章主要介紹了vue中使用$http.post請(qǐng)求傳參的錯(cuò)誤及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(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ò)誤,我就很納悶。并沒有寫get方法，那必定會(huì)出錯(cuò)。

在這里插入圖片描述

截圖奉上==

在這里插入圖片描述

傳遞的是json對(duì)象而不是數(shù)組。

還好之前有過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("添加失??！");
            });
            }

整體上沒有問題

在這里插入圖片描述

之后我有嘗試了一下

 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框架不熟。

與后端通信有問題，要么是json加入到url有問題、要么是json解析有問題。

解決方法

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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: