get请求包含参数属性为数组

简介: get请求包含参数属性为数组

凡是夫妇不吵架的家庭,准是一块阴森之地,既没有冲击,故也没有快乐——柏杨

有些时候,我们需要使用GET请求传递数组,但是使用很多前端请求框架,以及EcmaScript自带的URLSearchParams转换的URL参数都无法直接进行转换:

例如以下格式:

{
    "current": 1,
    "size": 1,
    "orders": [
        {
            "column": "age",
            "asc": true
        },
        {
            "column": "name",
            "asc": true
        }
    ]
}

使用URLSearchParams转换结果:

let searchParams = {current:1,size:1,orders:[{column:'age',asc:true},{column:'name',asc:true}]}
new URLSearchParams(searchParams).toString()
// 'current=1&size=1&orders=%5Bobject+Object%5D%2C%5Bobject+Object%5D'
// decodeURIComponent 解码 current=1&size=1&orders=[object+Object],[object+Object]

明显不是我们要的结果

那我们写一行js

Object.fromEntries(Object.entries(params).flatMap(([k,v])=>Array.isArray(v)?Object.entries(v).flatMap(([index,value])=> Object.entries(value).map(([ak,av])=>[`${k}[${index}].${ak}`,av])):[[k,v]]))

再封装一下:

function handleArrayParams(params){
 return Object.fromEntries(Object.entries(params).flatMap(([k,v])=>Array.isArray(v)?Object.entries(v).flatMap(([index,value])=> Object.entries(value).map(([ak,av])=>[`${k}[${index}].${ak}`,av])):[[k,v]]))   
}

最后使用:

let searchParams = {current:1,size:1,orders:[{column:'age',asc:true},{column:'name',asc:true}]}
function handleArrayParams(params){
 return Object.fromEntries(Object.entries(params).flatMap(([k,v])=>Array.isArray(v)?Object.entries(v).flatMap(([index,value])=> Object.entries(value).map(([ak,av])=>[`${k}[${index}].${ak}`,av])):[[k,v]]))   
}
new URLSearchParams(handleArrayParams(searchParams)).toString()

结果:

'current=1&size=1&orders%5B0%5D.column=age&orders%5B0%5D.asc=true&orders%5B1%5D.column=name&orders%5B1%5D.asc=true'

这个可以直接放在url后面当做参数使用,即便是数组也可以,这里只做了一层,并没有尝试深入处理

解码后是这样一个格式:

// 进行解码
decodeURIComponent('current=1&size=1&orders%5B0%5D.column=age&orders%5B0%5D.asc=true&orders%5B1%5D.column=name&orders%5B1%5D.asc=true')
// 解码后
'current=1&size=1&orders[0].column=age&orders[0].asc=true&orders[1].column=name&orders[1].asc=true'
相关文章
|
1月前
|
JSON 前端开发 数据格式
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射,并介绍了前后端参数传递的多种方式,包括传递单个参数、多个参数、对象、数组、集合以及JSON数据,并且涵盖了参数重命名和从URL中获取参数的方法。
66 0
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
|
6月前
|
前端开发 小程序
前端get请求参数包含数组的情况
前端get请求参数包含数组的情况
146 0
|
6月前
自定义封装一个方法让这个方法可以判断所有的数据类型并返回
自定义封装一个方法让这个方法可以判断所有的数据类型并返回
35 0
|
11月前
get请求包参数属性为数组(二)
get请求包参数属性为数组(二)
47 0
|
前端开发 JavaScript API
|
缓存 NoSQL Java
如何给多参数接口添加缓存(根据方法名字+参数名生成对应的key)
如何给多参数接口添加缓存(根据方法名字+参数名生成对应的key)
203 0
如何给多参数接口添加缓存(根据方法名字+参数名生成对应的key)
|
JSON 前端开发 Java
对前端传入的json对象解析成多个对象
如果是多个对象呢?那怎么解决这个问题? 此时就可以用到: multiRequestBodyDemo(@MultiRequestBody("dog") Dog dog, @MultiRequestBody("user") User user) 这种方式进行接收了。但spring boot是不支持这种方式的。因此,就需要自己写一个解析器来解析这样的传入方式和接收的方式。通常,比如我们有分页和对象时,就可以采用这种方式进行接收。
353 0
对前端传入的json对象解析成多个对象
|
测试技术 Android开发
怎么知道方法的参数有哪些类型呢?
怎么知道方法的参数有哪些类型呢?
211 0
|
XML JSON 编解码
在请求中传入不定长参数实现不同的逻辑处理的解决办法
在请求中传入不定长参数实现不同的逻辑处理的解决办法