失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > vue中接口请求使用post传数组参数的解决方式

vue中接口请求使用post传数组参数的解决方式

时间:2021-02-15 17:48:49

相关推荐

vue中接口请求使用post传数组参数的解决方式

解决方式:就是把要传的数组参数string化(只需要把参数是数组的那些string化,其他按正常的格式),也就是在对应位置使用JSON.stringify(arr)。当然后端要对这些参数进行解码,php中使用json_decode($_POST[‘activity_picture’])

先贴示例代码,拿去急用

var objTemp = {merchant_id: 1,activity_title: "嗡嗡嗡",activity_picture: JSON.stringify(["falleg.img"]),activity_label_id: JSON.stringify(["1", "2"]),is_continued: 1,}//content-type: application/x-www-form-urlencodedthis.release(objTemp);//请求接口已封装

如果可以解决你的问题或者感觉可以解决你的问题,你或许可以继续往下读,我粗浅的讲一下原理。

随便拷一段代码过来…

改动之前:

var objTemp = {merchant_id: 1,activity_title: "嗡嗡嗡",activity_picture: ["falleg.img"],activity_label_id: ["1", "2"],is_continued: 1,}//content-type: application/x-www-form-urlencodedthis.release(objTemp);//请求接口已封装

改动之前请求body被编码之后:

防止图片加载不出来,贴一段代码,图片加载出来就不用看下面这段代码。

//Form Data | view URL encoded{merchant_id: 1activity_title: 嗡嗡嗡activity_picture: falleg.imgactivity_label_id: 1,2is_continued: 1}

可以看到activity_picture,activity_label_id的数组标识不在了,因为content-type:application/x-www-form-urlencoded的原因,这个编码方式不懂的自行百度,总之就是把我们数组的标识给编码不在了,其实是这种编码方式只能识别到单双引号里的内容,外面的[]数组标识自然被忽略掉了。那我们要做的就是把参数的值字符化,让它在转换时保留[]数组标识。所以除了我上面给出的解决方案,JSON.stringify()之外。还可以直接把你的参数值塞进单或双引号之间。比如activity_picture:"[falleg.img]"

改动之后:

var objTemp = {merchant_id: 1,activity_title: "嗡嗡嗡",activity_picture: JSON.stringify(["falleg.img"]),activity_label_id: JSON.stringify(["1", "2"]),is_continued: 1,}//content-type: application/x-www-form-urlencodedthis.release(objTemp);//请求接口已封装

改动之后请求body被编码之后:

防止图片加载不出来,贴一段代码,图片加载出来就不用看下面这段代码。

//Form Data | view URL encoded{merchant_id: 1activity_title: 嗡嗡嗡activity_picture: ["falleg.img"]activity_label_id: ["1","2"]is_continued: 1}

好了,结果是前者请求出现问题,具体问题还要看后端的适配情况。

后者请求正常,当然这个也需要和后端协商好正确的处理方式。

如果觉得《vue中接口请求使用post传数组参数的解决方式》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。