vue 中 get / delete 传递数组参数方法

我会带着你远行 2022-11-11 05:53 191阅读 0赞

在前后端交互的时候，有时候需要通过 get 或者 delete 传递一个数组给后台，但是这样直接传递后台无法接收数据，因为在传递的过程中数组参数会被转译，结果如下：

> 参数：\{ name : \[ 1, 2, 3 \] \}  
> 转译效果：http://aaa.com?name\[\]=1&name\[\]=2&name\[\]=3  
> 目标效果：http://aaa.com?name=1&name=2&name=3

**解决办法：**  
使用 qs 插件 将数组参数序列化

1、qs.stringify({  a: ['b', 'c'] }, {  arrayFormat: 'indices' })
    // 输出结果：'a[0]=b&a[1]=c'
    2、qs.stringify({  a: ['b', 'c'] }, {  arrayFormat: 'brackets' })
    // 输出结果：'a[]=b&a[]=c'
    3、qs.stringify({  a: ['b', 'c'] }, {  arrayFormat: 'repeat' })
    // 输出结果：'a=b&a=c'
    4、qs.stringify({  a: ['b', 'c'] }, {  arrayFormat: 'comma' })
    // 输出结果：'a=b,c'

安装

npm install qs

使用

//在 axios 请求拦截器里面
    import qs from 'qs'
    axios.interceptors.request.use(request => { 
      if (request.method === 'delete' || request.method === 'get') { 
       request.paramsSerializer = function(params) { 
         return qs.stringify(params, {  arrayFormat: 'repeat' })
       }
      }
      return request
    },(error) =>{ 
      return Promise.reject(error);
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关 java get url中传递数组参数

问题：在get请求参数中要加个参数 &orderFileds=\[\{"fieldName":"REQUEST\_ID","sortOrder":"desc"\}\]

不念不忘少年蓝@/ 2024年03月22日 18:11/ 0 赞/ 65 阅读

相关 vue项目中GET请求传数组类型参数

在AJAX异步请求为GET方式时，如果需要传递到后台的参数是数组类型，直接通过query的方式会有问题，参数在URL上的展示形式如下：参数：\{name:\

偏执的太偏执、/ 2022年12月10日 05:57/ 0 赞/ 190 阅读

相关 vue 中 get / delete 传递数组参数方法

在前后端交互的时候，有时候需要通过 get 或者 delete 传递一个数组给后台，但是这样直接传递后台无法接收数据，因为在传递的过程中数组参数会被转译，结果如下： > 参数

我会带着你远行/ 2022年11月11日 05:53/ 0 赞/ 192 阅读

相关 SpringBoot 的 Get 方法传递数组参数

如题，这个功能点比较少见，但是也确实存在，这里记录一下。只需要改一下传参的声明：变量改成数组变量。 @GetMapping("/test") public

我不是女神ヾ/ 2022年10月20日 01:17/ 0 赞/ 261 阅读

相关 html如何get请求参数传递数组,get请求如何传递数组参数

问题当我们需要通过get方式传递一个数组作为参数 tag:\[1,2,3,4\] 解决方案 01. 自己处理 // 编辑-(批量)移除测试用例 const delT

古城微笑少年丶/ 2022年10月09日 00:51/ 0 赞/ 415 阅读

相关【Express】—get传递参数

【Express】—get传递参数 var express = require('express'); var app = express();

冷不防/ 2022年08月29日 09:49/ 0 赞/ 195 阅读

相关 Get方法中文传递参数乱码

public String base64(String content){ //对字符串进行Base64编码 try {

短命女/ 2022年06月11日 05:46/ 0 赞/ 247 阅读

相关 SpringMVC接收Ajax通过PUT、POST、GET、DELETE传递的参数

一、问题描述 1.今天在进行SSM+RESTful整合的时候，发现通过AJAX发送的POST和GET请求能正常接收，但是无法通过PUT和DELETE传递参数，网上

朱雀/ 2022年04月16日 21:17/ 0 赞/ 261 阅读

相关 vue 获取url参数、get参数返回数组

这是vue过滤器获取url参数，返回数组 Vue.prototype.$url=function(){ var url = decodeURICo

川长思鸟来/ 2022年04月11日 11:55/ 0 赞/ 517 阅读

相关 linux下curl get方法传递参数

url 为 http://mywebsite.com/index.php?a=1&b=2&c=3 web形式下访问url地址，使用$\_GET是可以获取到所有的参数

曾经终败给现在/ 2021年11月29日 12:36/ 0 赞/ 320 阅读