在 URL 中传递多个参数

在 Web 开发中，经常需要将多个参数一起传递给 URL。这些参数可以是查询参数，也可以是路径参数。有多种方式可以将这些参数传递给 URL，本文将为您介绍其中几种常用的方式。

1. 查询参数

查询参数是指在 URL 中以 ? 开头，参数间以 & 分隔的形式传递的参数。例如：

https://example.com/search?q=apple&category=fruits&order=asc

上面这个 URL 传递了三个查询参数，分别是 q、category 和 order。它们的值分别为 apple、fruits 和 asc。

在前端 JavaScript 中，可以通过 URLSearchParams 对象来解析查询参数：

const url = new URL("https://example.com/search?q=apple&category=fruits&order=asc");
const searchParams = url.searchParams;
console.log(searchParams.get("q")); // "apple"
console.log(searchParams.get("category")); // "fruits"
console.log(searchParams.get("order")); // "asc"

2. 路径参数

路径参数是指将参数直接添加到 URL 路径中的一种方式。例如：

https://example.com/user/123/profile

上面这个 URL 传递了一个路径参数，它的名称为 id，值为 123。

在后端服务器端程序中，需要根据 URL 路径来提取参数。例如，在 Node.js 中可以使用 express 框架：

app.get("/user/:id/profile", function(req, res) {
  const userId = req.params.id;
  // ...
});

3. FormData

在前端开发中，可以使用 FormData 对象来构造表单数据，然后将表单数据一起提交到服务器端。

<form id="myform">
  <input name="firstname">
  <input name="lastname">
</form>

const form = document.getElementById("myform");
const formData = new FormData(form);
formData.append("password", "123456");

fetch("https://example.com/register", {
  method: "POST",
  body: formData
});

结论

以上是三种常用的方式，来在 URL 中传递多个参数，他们各有优缺点。查询参数简单易用，但是对于多个参数的情况下 URL 可读性差。路径参数可读性好，但是需要在服务器端处理 URL。FormData 对象适合构造表单数据，但是仅适用于前端，无法直接在 URL 中传递参数。

不同情况下，可以根据实际需求选择不同的方式来传递多个参数。