使用 URLSearchParams 和 $.param() 替换 url 请求中的数组参数答案

【问题标题】：Replace an array parameter in a url request using URLSearchParams and $.param()使用 URLSearchParams 和 $.param() 替换 url 请求中的数组参数
【发布时间】：2020-05-05 22:35:39
【问题描述】：

我想在单击数组元素之一的链接时更改 url 请求。例如：

?foo[]=1&foo[]=2

到

?foo[]=1&foo[]=3

我使用 URLSearchParams 和方法 .getAll('foo[]') 然后 .set('foo[]', array) 最后，我使用 jquery 方法 param() 生成正确的 url 字符串（因为我无法将 URLSearchParams.toString() 与数组一起使用——结果总是 foo[]=1&3）。

这是可行的，但如果我想保留请求中的其他参数，重新生成 url 会变得很复杂。

例如：

?foo[]=1&foo[]=2&bar=3&bar[]=4&page=1

到

?foo[]=1&foo[]=3&bar=3&bar[]=4&page=1

我有很多参数，所以我想避免重建整个查询对象以传递给$.param()。所以：

是否有任何选项可以在不使用任何循环的情况下从 URLSearchParams 获取整个数组。
将URLSearchParams.toString() 与数组一起使用有什么技巧吗？

【问题讨论】：

标签： javascript jquery get request

【解决方案1】：

您需要做的是删除foo[] 条目，然后从.getAll('foo[]') 和.append() 迭代值数组。

例如

const usp = new URLSearchParams([
  ['foo[]', 1],
  ['foo[]', 2],
  ['bar', 3],
  ['bar[]', 4],
  ['page', 1]
])

console.info('original:', decodeURIComponent(usp.toString()))

// get all 'foo[]' entries
const foos = usp.getAll('foo[]')
// incremenent the last value
foos[foos.length - 1]++

// remove 'foo[]'
usp.delete('foo[]')

// iterate values and append
foos.forEach(foo => usp.append('foo[]', foo))

console.info('updated:', decodeURIComponent(usp.toString()))

【讨论】：