jquery 为URL添加参数,在查询字符串中放入数组

kcugc4gi  于 2023-03-29  发布在  jQuery
关注(0)|答案(3)|浏览(262)

目标

我已经建立了一个交互式,人们可以选择六名球员组成他们的全明星队,当他们点击分享到Twitter时,我希望有一个包含所有六名球员参数的URL,比如website.com/?playerName=picked?playerName=picked,这样人们就可以分享他们的球队

问题

  • 向URL追加参数的最佳方式是什么?
  • 如何将数组放入查询字符串中?
mgdq6dx1

mgdq6dx11#

你可以直接在url中使用数组,但是你需要将数组序列化为字符串。
这里有一个小函数来自动化它。
当使用url时,你应该总是使用encodeURIComponent来编码任何非url友好的字符。播放器是一个数组,所以我们Map它并获得一个已编码的新数组。
之后,我们只需使用&连接数组

const players = [
  'player Name 1',
  'playerName2',
  'playerName3'
]

const parameterizeArray = (key, arr) => {
  arr = arr.map(encodeURIComponent)
  return '?'+key+'[]=' + arr.join('&'+key+'[]=')
}

console.log(parameterizeArray('player', players))

编辑

唯一的区别是函数声明风格,其他都是标准ES5

function parameterizeArray(key, arr) {
  arr = arr.map(encodeURIComponent)
  return '?'+key+'[]=' + arr.join('&'+key+'[]=')
}
aurhwmvo

aurhwmvo2#

清洁剂:

website.com/?players=player1,player2,player3,player4

然后拆分查询以获得结果:

var arrayResult = query.players.split(",")
ltqd579y

ltqd579y3#

您应该依靠内置的URLSearchParams API来构造(和解构)查询字符串。
使用append将新参数添加到末尾(使用set将替换现有参数):

const players = ["alice", "bob", "charlie"];

const params = new URLSearchParams();

players.forEach((player) => params.append("playerName", player));

console.log(params.toString());

使用getAll检索所有值的数组(使用get只会得到第一个值):

const params = new URLSearchParams("playerName=alice&playerName=bob&playerName=charlie");

console.log(params.getAll("playerName"));

您还可以获取URLSearchParams对象from a URL object

const url = new URL("https://website.com/?playerName=alice&playerName=bob&playerName=charlie");

const params = url.searchParams;

console.log(params.getAll("playerName"));

相关问题