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

本文探讨了在使用AJAX进行GET请求时遇到的数组参数传递问题,传统query方式会导致服务端解析错误。提出了两种解决方案:1) 直接在URL后拼接数组元素;2) 使用`qs`库进行参数序列化,特别是`qs.stringify`的`arrayFormat: 'repeat'`配置可以满足需求。同时提供了安装和使用`qs`的示例代码。
摘要由CSDN通过智能技术生成

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

参数:{name:[‘张三’,'李四','王五','赵六']}

url:https://mp.csdn.net/console/editor/html/108768288

通过query的方式传参,请求url变成了下面这样

https://mp.csdn.net/console/editor/html/108768288?name[]=张三&id[]=李四&id[]=王五&id[]=赵六

这样服务端解析的参数是错误的,下面介绍两种我曾经是用过的方式:

1.直接将参数拼接在url

这种方式简单粗暴,直接遍历name数组,拼接在url后面

let name=[‘张三’,'李四','王五','赵六'];

let str="?"

for(var index in name){
    str+='name='+name[index]+'&'
}

let url='https://mp.csdn.net/console/editor/html/108768288'+str

2.使用qs做参数序列化

qs主要是增加一些安全性的查询字符串解析和序列化字符串的库,详细文档:https://www.npmjs.com/package/qs

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'

其中{ arrayFormat: 'repeat' }的序列化结果满足我们的条件,我们可以在axios请求拦截器中对参数进行序列化配置,具体实现代码如下:

a.安装qs

npm i qs

b.在axios请求方法文件中使用,我的文件名是request.js 

// request.js

import qs from 'qs'

....



axios.interceptors.request.use(async (config) => {
//只针对get方式进行序列化
 if (config.method === 'get') {
  config.paramsSerializer = function(params) {
   return qs.stringify(params, { arrayFormat: 'repeat' })
  }
 }
}

 

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值