如何使用 JavaScript 从 URL 中读取 GET 数据？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们常常需要从 URL 中获取参数来对页面进行适当的调整。本文将介绍如何使用 JavaScript 从 URL 中读取 GET 数据。

获取 URL

首先，我们需要获取当前页面的 URL。可以通过 window.location 对象访问当前 URL 的各个部分，例如：

const url = window.location.href;

获取 GET 数据

接下来，我们需要解析 URL 中的 GET 数据。GET 数据是以查询字符串的形式出现在 URL 后面的，格式为 key=value，多个键值对之间用 & 分隔。例如，以下 URL 包含了两个 GET 参数：

http://example.com/page?name=John&age=30

我们可以使用 split() 方法将查询字符串分割成多个键值对，再使用 forEach() 方法遍历每个键值对，并将其解析成一个对象。示例代码如下：

const urlParams = {};
url.split('?')[1].split('&').forEach(function (param) {
  const keyValue = param.split('=');
  urlParams[keyValue[0]] = decodeURIComponent(keyValue[1] || '');
});

其中，decodeURIComponent() 方法用于解码 URI 中的特殊字符（例如 %20 表示空格），以便正确地显示数据。

现在，我们可以通过 urlParams 对象访问所有 GET 参数。例如，要获取 name 参数的值，可以使用以下代码：

const name = urlParams['name'];

完整代码示例

下面是一个完整的示例代码，展示如何从 URL 中读取 GET 数据并使用它们更新页面内容：

-- -------------------- ---- -------
--------- -----
------
------
  ----------- --- ------------
-------
------
  ------------ ----- -----------------------
  --------
    ----- --- - ---------------------
    ----- --------- - ---
    --------------------------------------------- ------- -
      ----- -------- - -----------------
      ---------------------- - ------------------------------ -- ----
    ---
    ----- ---- - ------------------
    ------------------------------------------- - -----
  ---------
-------
-------

结语

本文介绍了如何使用 JavaScript 从 URL 中读取 GET 数据，并提供了示例代码以帮助你实现该功能。如果你在实践中遇到任何问题，请随时查看相关的 API 文档或向社区寻求帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/28139