如何将数组作为 URL 参数传递？

Question

我想传递一个数组并作为 URL 参数添加到我页面上的链接，因为稍后在服务器端我需要数组中的值。我该怎么办？

myArray = ['aaa', 'bbb', 'ccc'];

$('#myLink').attr({"href" : '/myLink?array=' + myArray});

我不确定这是否是正确的方法？

Answer 1

您可以序列化 JSON：

myArray = ['aaa', 'bbb', 'ccc'];
var arrStr = encodeURIComponent(JSON.stringify(myArray));
$('#myLink').attr({ href: '/myLink?array=' + arrStr });

如果您的解析（在下一页）也是通过 JavaScript 完成的，您将相反地使用 JSON.parse()。在 PHP 中，它是 json_decode()。

Answer 2

试试这个

$('#myLink').attr({"href" : '/myLink?array=' + myArray.join(',')});

在服务器上：捕获和分割数据。

Answer 3

不应该依赖于服务器端：根据URI标准规范，所有参数必须有一个名称，并且应该有一个值。但可以有多个同名的参数，这是序列化数组的正确方法：

http://server/context?array=aaa&array=bbb&array=ccc&otherparameter=x

你可以这样做：

var s="";
for (var i=0;i< myArray.length;i++)
{
  s+="&myArray="+myArray[i];
}
var url="http://server/context?"+s;

Answer 4

我会采用这种方法，

var myArray = ['aaa', 'bbb', 'ccc', ];

var myArrayQry = myArray.map(function(el, idx) {
    return 'myArray[' + idx + ']=' + el;
}).join('&');

// myArray[0]=aaa&myArray[1]=bbb&myArray[2]=ccc

然后，我在服务器端以数组形式检索 URL 查询参数。

Answer 5

如何将字符串数组作为 URL 参数传递：

const myLink = 'https:/example.com/api'
const myArray = ['aaa', 'bbb', 'ccc'];
let apiUrl = `${myLink}/query?`;

myArray.forEach((x, i) => {
  if (i === 0) {
    apiUrl += `array=${x}`;
  } else {
    apiUrl += `&array=${x}`;
  }
});

console.log(apiUrl);
document.body.innerHTML = apiUrl;

Answer 6

我的做法：

var myArray = ['aaa', 'bbb', 'ccc'];
var baseUrl = '/myLink';
var paramName = 'array=';

var arrayAsString = '?' + paramName + myArray.join('&' + paramName);
var urlWithParams = baseUrl + arrayAsString;

window.location.href = urlWithParams;

Answer 7

myArray = ['aaa', 'bbb', 'ccc'];
myArrString = JSON.stringify(myArray.join("_"))

$('#myLink').attr({"href" : `/myLink?array=${myArrString}`});

然后当您稍后需要它时，您可以解析它，然后像这样取回数组

JSON.parse(myArrString).split("_")

Answer 8

另一种方法如下

import Router from 'next/router'

Router.push({
  pathname: '/search',
  query: {searchTerm: searchRef.current ? searchRef.current["value"] : '', codeSets: JSON.stringify(selectedCodeSets)}
}, '/search');

本示例中的 selectedCodeSets 是来自状态数据的数组

const [selectedCodeSets, setSelectedCodeSets] = useState<any>(['1']);

我们可以在定向页面中解析该数据，如下所示

import {withRouter} from 'next/router'

const DaComponent = (props) => {
  useEffect(() => {
        let codeSets = JSON.parse(props.router.query.codeSets);
  }, [props.router]);
};

export default withRouter(DaComponent);

Answer 9

我会简单地这样做。

const BASE_URL = "www.yourUrl.com/yourEndpoint";
const getArrayQuery= (paramName, someArray) => {
   return someArray
       .map((x) => `${paramName}=${x}`)
       .join('&');

const query = getArrayQuery("array", someCoolArray);
const url = `${BASE_URL}?${query}`;

很可能您不想为 BASE_URL 和随后的整个 url 声明变量。但这会以非常小的复杂性完成工作。