前端get请求参数包含数组的情况

news2024/11/23 8:31:08

前端get请求参数包含数组的情况

    • 问题描述
    • 解决办法
    • 文章参考

问题描述

当我们使用post传数组参数的时候,是没有问题的,可以不经过参数处理即可正常传参,但是当我们使用get请求传数组参数的时候,会出现下图这样的情况:

  1. ajax请求方法

    // ajax请求方法
    export function getDataApi(params) {
      return axios.request({
        url: `${prefix}/transferFee/page`,
        method: "GET",
        params,
      });
    }
    
  2. 调用请求

    import { getDataApi } from '@/api/index.js';
    
    created() {
    	const params = {
    		siteCode: '880',
    		objectType: '',
    		objectName: '',
    		offerName: '',
    		productCode: '',
    		effectiveStatus: '',
    		offerStatus: '',
    		offerCode: '',
    		subjectCodes: ['160', '161', '162'],
    		pageNum: 1,
    		pageSize: 10,
    	}
    	getDataApi(params).then((res) => {
    		console.log('请求成功', res)
    	})
    }
    
    

之后我们控制台查看请求情况,就会发现当get请求按照这样的方式传递数组参数的时候,查询字符串会错乱,出现这样的情况
http://localhost:5173/basic/cmanager/transferFee/page?siteCode=880&objectType=&objectName=&offerName=&productCode=&effectiveStatus=&offerStatus=&offerCode=&subjectCodes[]=160&subjectCodes[]=161&subjectCodes[]=162&pageNum=1&pageSize=10

数组参数subjectCodes: ['160', '161', '162']被分割成了subjectCodes[]=160&subjectCodes[]=161&subjectCodes[]=16
在这里插入图片描述
这样后台是无法正确接受数组参数的,因此我们需要对get请求的数组参数做特殊的处理。

解决办法

主要思路就是数组参数序列化,如果我们使用的是axios插件,那么可以对axios的paramsSerializer属性进行处理,使得数组参数能够序列化

  1. 方法:一:自行写回调函数对数组参数进行处理

    // ajax请求方法
    export function getDataApi(params) {
      return axios.request({
        url: `${prefix}/transferFee/page`,
        method: "GET",
        params,
        // 处理git请求传subjectCodes数组的问题,对数组进行序列化
    	paramsSerializer: function(params) {
      		let arr = [];
      		const {subjectCodes, ...rest} = params;
      		for (let key in rest) {
        		arr.push(`${key}=${rest[key]}`)
      		}
      		if (subjectCodes) {
        		let subjectCodes=params.subjectCodes.map(_=>`subjectCodes=${_}`).join('&');
        		arr.push(subjectCodes)
      		}
      		const paramsStr = arr.join('&');
      		console.log(paramsStr);
      		return paramsStr;
    	}
      });
    }
    
  2. 方法二:使用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'
    

    axios配置:

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

    如果是小程序使用qs

    let urlQueryString = qs.stringify(options.params, {   //使用到qs ,先下载,后引入
      addQueryPrefix: true,
      allowDots: true,
      arrayFormat: 'repeat'
    });
    myUrl += urlQueryString;
    
  3. get请求,数组参数序列化之后的查询字符串应该是如下形式
    subjectCodes=160&subjectCodes=161&subjectCodes=162
    在这里插入图片描述

文章参考

https://www.cnblogs.com/kingreatwill/p/12641238.html
https://www.jianshu.com/p/656c22a24b69

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/506739.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何通过云平台加快Blender渲染?

Blender是一款专业自由及开放源代码的三维计算机图形软件,也是免费的开源3D创作套件,支持整个3D流程——建模、UV、贴图、材质、骨骼、动画、渲染、后期、合成、剪辑、跟踪和抠像等等,CG行业内也有不少大佬们通过Blender制作出了许多优秀作品…

代码随想录 LeetCode数组篇 螺旋矩阵II Java实现

文章目录 (中等)59. 螺旋矩阵II(中等)54. 螺旋矩阵(简单)JZ29 顺时针打印矩阵 (中等)59. 螺旋矩阵II 因为我是先做的JZ29,所以看到这题的时候,几乎就是一样的…

SpringCloud入门实战之项目(一)

一、新建父工程 以“下单”需要调“支付”模块为例,从零开始搭建springcloud-001项目,陆续集成相关组件。 新建服务提供者cloud-payment工程,服务调用者cloud-order工程,完成order对payment的调用。 只留下pom文件,其…

基于人工智能AI视频分析的智慧安监解决方案

方案背景 为了保证对园区环境风险进行有效识别,传统视频监控存在视频结构化利用率低的问题,在实际使用过程中,安全管理人员工作效率低下,依靠人工肉眼查看灵活度低,风险漏报概率高,出现异常情况跟踪不及时&…

中文润色神器-中文润色软件

中文写作润色软件 中文写作润色软件是一种基于自然语言处理技术和人工智能算法的工具,旨在提高中文文本的语言风格、表达能力和可读性。它可以自动检测文本中出现的语法、拼写、标点符号等语言问题,并给出相应的修正和修改建议。 中文写作润色软件的主…

paddleLite在Android部署初体验(环境问题)

paddleLite初体验(环境问题) Android Studio下载Paddle Lite Demo打开项目环境配置下载到手机 Paddle Lite是百度开发的一种方便部署的深度学习推理框架,笔者最近想接触一些模型部署相关项目,就先接触了一下Paddle Lite&#xff0…

手术麻醉信息系统源码 php + mysql + vue2,覆盖患者就诊全过程,体征数据自动采集绘制

手术麻醉信息系统源码 php mysql vue2 B/S网页版 麻醉信息系统是HIS产品的中的一个组成部分,主要应用于医院的麻醉科,属于电子病历类产品。医院麻醉监护的功能覆盖整个手术与麻醉的全过程,包括手术申请与排班、审批、安排、术前、术中和术…

list_for_each_entry()函数分析

在Linux内核源码中,经常要对链表进行操作,其中一个很重要的宏是list_for_each_entry: /*** list_for_each_entry - iterate over list of given type* pos: the type * to use as a loop cursor.* head: the head for your list.* member: t…

9个已开源的GPT4平替分享(附开源代码+论文)

资料整理自网络,有误欢迎指正 对于想要研究大模型的同学来说,目前ChatGPT无疑是最好的学习对象,但等它开源估计是不太可能了,所以学姐今天整理了一些开源的类GPT模型,帮助大家更好的理解大模型背后的机理。 PS&#x…

io,nio,aio区别

文章目录 前言io类型介绍同步阻塞io同步非阻塞ioio多路复用异步io 普通ionioChannelChannel实现基本的 Channel代码 示例 BufferBuffer的基本用法Buffer的capacity,position和limitcapacitypositionlimit Buffer的类型Buffer的分配向Buffer中写数据从Buffer中读取数据 Selector…

CSS 实现任意角度圆环

参考链接: css 制作圆环 - 掘金 主要思路: 利用 CSS 的 clip-path 属性进行裁剪 clip-path 具体信息参考 polygon() - MDN (mozilla.org) 该属性原理是:利用多边形进行对图形的裁剪。 根据具体代码,去分析 clip-path: polyg…

JavaWeb:Servlet、ServletContext、HttpServletResponse、HttpServletRequest 的详细内容

文章目录 JavaWeb - 02一、Servlet1. 简介2. HelloServlet3. Servlet 原理4. Mapping 原理 二、ServletContext1. 共享数据2. 获取初始化参数3. 请求转发4. 读取资源文件 三、HttpServletResponse1. 方法介绍2. 应用:下载文件3. 应用:创建验证码4. 应用&…

office web apps在线office文件预览部署及问题处理

文件下载链接网盘: 链接: https://pan.baidu.com/s/1OmWM5END0jyWESGzFCniEw 提取码: ejpg 基本环境需要两台机,1台为域控,1台为 (office web apps ,需要加入到域) 主机1:添加域控服务 安装完…

设备树简介

设备树 设备树简介 设备树是一种描述硬件的数据结构,它起源于OpenFirmware(OF)。 在Linux 2.6中, ARM架构的板极硬件细节过多地被硬编码在arch/arm/plat-xxx和arch/arm/mach-xxx中,采用设备树后,许多硬件…

python操作字典

# 字典 score{"张三":"23","王五":"45"} print(score) dctdict(name张三,age20) print(dict) print(type(score)) # 字典元素的获取 print(score[张三]) print(score.get(张三)) # 判断是否是字典中的元素 print(王五 in score) # 为字…

浅析AI视频智能识别技术如何助力智慧平安校园建设

校园安全一直是学生健康成长、全面发展的前提与保障。校园门口伤害事件的频发与校园内应急事件的突发,让建设平安校园的任务愈加急迫。校园人流量大、监控点多,安保人员无法同时盯住上百个视频画面,亦无法保证24小时有效监控。传统的校园安防…

软件测试简历项目经验怎么写?一篇足矣解决

一、前言:浅谈面试 面试是我们进入一个公司的门槛,通过了面试才能进入公司,你的面试结果和你的薪资是息息相关的。那如何才能顺利的通过面试,得到公司的认可呢?面试软件测试要注意哪些问题呢?下面和笔者一起来看看吧。这里分享一…

OpenGL(十一)——材质

目录 一、前言 二、物体材质 三、光源材质 一、前言 OpenGL材质是模拟现实世界中不同材质物体表面,如木制箱子和钢制箱子对光的反射程度不同。物体材质对接受光散射程度不同,较少散射产生较小高光点,较多散射则会产生较大高光点。前面章节…

如何节约ChatGPT消耗的token

如何节约GPT的token.md 原文链接:小回博客 如何节约GPT的token 一、模拟一下携带上下文的流程: 第1次问答: 你:帮我写一个1000字的文案(13) gpt: xxxxxx (1000)第2次问答: 你:谢…