Skip to content

get 请求的参数是否能够使用数组?

Posted on:2024年8月20日 at 11:14

GET 请求的参数可以使用数组。

虽然在 URL 查询字符串中直接表示数组略有复杂,但有几种常见的方式来实现数组的传递。以下是一些常见的处理数组参数的方法:

1. 使用重复的参数名

最简单的方法是使用重复的参数名,每个数组元素作为一个独立的参数传递。例如,传递一个数组 [1, 2, 3] 可以表示为:

?numbers=1&numbers=2&numbers=3

这种方式常见于许多后端框架和库,它们能够解析这种格式的参数。

2. 使用方括号表示法

在一些编程环境中,可以使用方括号表示法来传递数组,这种方式可以表示嵌套的数组和对象。例如:

?numbers[]=1&numbers[]=2&numbers[]=3

这种方式在 PHP 和 Ruby 等语言中非常常见,它们能够解析这样的查询字符串。

3. 使用逗号分隔的字符串

另一种常见的方法是将数组元素用逗号或其他分隔符连接成一个字符串。例如:

?numbers=1,2,3

在服务器端,需要将这个字符串分隔开来以恢复原始数组。这种方式在 JavaScript 中也比较常见,尤其是当数组的顺序不需要保留时。

4. 使用 JSON 字符串

在一些情况下,可以将数组序列化为 JSON 字符串进行传递。例如:

?numbers=%5B1%2C2%2C3%5D

这里的 %5B, %2C, 和 %5D 是 URL 编码形式的 [,]。在服务器端,需将 JSON 字符串解析回数组。

示例代码

前端示例:

// 使用重复的参数名
const array = [1, 2, 3];
const queryString = array.map((value) => `numbers=${value}`).join("&");
const url = `https://example.com?${queryString}`;

// 使用方括号表示法
const queryStringBrackets = array
  .map((value) => `numbers[]=${value}`)
  .join("&");
const urlBrackets = `https://example.com?${queryStringBrackets}`;

// 使用逗号分隔的字符串
const queryStringComma = `numbers=${array.join(",")}`;
const urlComma = `https://example.com?${queryStringComma}`;

// 使用 JSON 字符串
const queryStringJSON = `numbers=${encodeURIComponent(JSON.stringify(array))}`;
const urlJSON = `https://example.com?${queryStringJSON}`;

后端示例(Node.js Express):

app.get("/", (req, res) => {
  // 使用重复的参数名
  const numbers = req.query.numbers; // [1, 2, 3] - 自动解析为数组

  // 使用方括号表示法
  const numbersBrackets = req.query["numbers[]"]; // [1, 2, 3] - 自动解析为数组

  // 使用逗号分隔的字符串
  const numbersComma = req.query.numbers.split(","); // ['1', '2', '3'] - 需要转换为数字数组

  // 使用 JSON 字符串
  const numbersJSON = JSON.parse(req.query.numbers); // [1, 2, 3]
});
原文转自:https://fe.ecool.fun/topic/b7e5c9a8-6756-4c79-9b75-a3cb680e12b4