如何在 JavaScript 中的查询字符串中发送数组

在 Web 开发中，我们经常需要将数据通过 URL 字符串传递给服务端，这就需要使用查询字符串（query string）。查询字符串是 URL 中的一部分，一般使用 key=value 的形式表示数据。但是当我们要传递一个数组时，该怎么办呢？本文将介绍如何在 JavaScript 中的查询字符串中发送数组。

1. 将数组转换为字符串

第一种方法是将数组转换为字符串，然后将字符串作为查询字符串的值发送。

代码示例

const arr = [1, 2, 3];
const encodedArr = encodeURIComponent(JSON.stringify(arr)); // 将数组转换为字符串并进行 URL 编码
const url = `http://example.com?arr=${encodedArr}`; // 将数组字符串拼接到 URL 中
console.log(url); // 输出 http://example.com?arr=%5B1%2C2%2C3%5D

解释说明

上述代码中，我们首先定义了一个数组 arr，然后使用 JSON.stringify 方法将数组转换为字符串，并使用 encodeURIComponent 方法进行 URL 编码，然后将编码后的字符串作为查询字符串的值拼接到 URL 中。

注意：当使用 encodeURIComponent 方法进行 URL 编码时，需要将整个字符串一起进行编码，而不能只编码数组本身，否则可能会出现问题。

2. 使用多个相同的键

第二种方法是使用多个相同的键，每个键对应数组中的一个值，服务端收到请求后会自动将这些值组装成数组。

代码示例

const arr = [1, 2, 3];
const url = `http://example.com?arr=${arr[0]}&arr=${arr[1]}&arr=${arr[2]}`; // 将数组中的每个值拼接到 URL 中
console.log(url); // 输出 http://example.com?arr=1&arr=2&arr=3

解释说明

上述代码中，我们使用了多个相同的键 arr，每个键对应数组中的一个值，然后将它们拼接到 URL 中。服务端收到请求后会自动将这些值组装成数组。

需要注意的是，当数组中的值不确定时，可以使用循环生成多个相同的键。

总结

以上两种方法都可以在 JavaScript 中的查询字符串中发送数组。第一种方法使用了 JSON.stringify 和 encodeURIComponent 方法将数组转换为字符串，并进行 URL 编码，然后将编码后的字符串作为查询字符串的值拼接到 URL 中。第二种方法则是使用多个相同的键，每个键对应数组中的一个值，服务端收到请求后会自动将这些值组装成数组。在使用时需要根据具体情况选择合适的方法。