vue项目中GET请求传数组类型参数 偏执的太偏执、 2022-12-10 05:57 190阅读 0赞 在AJAX异步请求为GET方式时,如果需要传递到后台的参数是数组类型,直接通过query的方式会有问题,参数在URL上的展示形式如下: 参数:\{name:\[‘张三’,'李四','王五','赵六'\]\} url:[https://mp.csdn.net/console/editor/html/108768288][https_mp.csdn.net_console_editor_html_108768288] 通过query的方式传参,请求url变成了下面这样 [https://mp.csdn.net/console/editor/html/108768288][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][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' }) } } } [https_mp.csdn.net_console_editor_html_108768288]: https://mp.csdn.net/console/editor/html/108768288 [https_www.npmjs.com_package_qs]: https://www.npmjs.com/package/qs
相关 java中get请求传数组 ,集合 妈的什么狗屁小程序,格式这么严谨 ![在这里插入图片描述][bc2f346cbd7e43318dccc54f286f0853.png] url 拼接为 /bdwx/by 川长思鸟来/ 2023年09月23日 23:54/ 0 赞/ 46 阅读
相关 vue项目中GET请求传数组类型参数 在AJAX异步请求为GET方式时,如果需要传递到后台的参数是数组类型,直接通过query的方式会有问题,参数在URL上的展示形式如下: 参数:\{name:\ 偏执的太偏执、/ 2022年12月10日 05:57/ 0 赞/ 191 阅读
相关 vue 中 get / delete 传递数组参数方法 在前后端交互的时候,有时候需要通过 get 或者 delete 传递一个数组给后台,但是这样直接传递后台无法接收数据,因为在传递的过程中数组参数会被转译,结果如下: > 参数 我会带着你远行/ 2022年11月11日 05:53/ 0 赞/ 192 阅读
相关 PHP通过GET方法参数为数组请求 http://xthk.cn/api/getFilters?city_ids[0]=11&city_ids[1]=22&city_ids[2]=33 city 「爱情、让人受尽委屈。」/ 2022年10月09日 12:25/ 0 赞/ 171 阅读
相关 html如何get请求参数传递数组,get请求如何传递数组参数 问题 当我们需要通过get方式传递一个数组作为参数 tag:\[1,2,3,4\] 解决方案 01. 自己处理 // 编辑-(批量)移除测试用例 const delT 古城微笑少年丶/ 2022年10月09日 00:51/ 0 赞/ 415 阅读
相关 vue项目 get方式传参数组 背景:多选下拉框的查询,需要给后端传的是个数组(get方式) ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_ 超、凢脫俗/ 2022年09月04日 05:43/ 0 赞/ 146 阅读
相关 vue 获取url参数、get参数返回数组 这是vue过滤器 获取url参数,返回数组 Vue.prototype.$url=function(){ var url = decodeURICo 川长思鸟来/ 2022年04月11日 11:55/ 0 赞/ 517 阅读
相关 axios get 传参数 数组 get 传参数 数组 this.$axios.get('/getUserByName',{ params:{ names: ╰+攻爆jí腚メ/ 2022年03月11日 15:52/ 0 赞/ 872 阅读
相关 Vue :axios请求post、get请求根据后参数类型进行传参(带token) axios请求post、get请求根据后参数类型的使用(带token) 一、get请求: get请求常见的参数类型(Parameter Type)是query, 左手的ㄟ右手/ 2021年07月25日 02:23/ 0 赞/ 1457 阅读
还没有评论,来说两句吧...