在前端开发中，我们常常需要从 URL 中获取参数来对页面进行适当的调整。本文将介绍如何使用 JavaScript 从 URL 中读取 GET 数据。
获取 URL
首先，我们需要获取当前页面的 URL。可以通过 window.location 对象访问当前 URL 的各个部分，例如：
----- --- - ---------------------
获取 GET 数据
接下来，我们需要解析 URL 中的 GET 数据。GET 数据是以查询字符串的形式出现在 URL 后面的，格式为 key=value，多个键值对之间用 & 分隔。例如，以下 URL 包含了两个 GET 参数：
----------------------------------------
我们可以使用 split() 方法将查询字符串分割成多个键值对，再使用 forEach() 方法遍历每个键值对，并将其解析成一个对象。示例代码如下：
----- --------- - --- --------------------------------------------- ------- - ----- -------- - ----------------- ---------------------- - ------------------------------ -- ---- ---
其中，decodeURIComponent() 方法用于解码 URI 中的特殊字符（例如 %20 表示空格），以便正确地显示数据。
现在，我们可以通过 urlParams 对象访问所有 GET 参数。例如，要获取 name 参数的值，可以使用以下代码：
----- ---- - ------------------
完整代码示例
下面是一个完整的示例代码，展示如何从 URL 中读取 GET 数据并使用它们更新页面内容：
--------- -----
------
------
----------- --- ------------
-------
------
------------ ----- -----------------------
--------
----- --- - ---------------------
----- --------- - ---
--------------------------------------------- ------- -
----- -------- - -----------------
---------------------- - ------------------------------ -- ----
---
----- ---- - ------------------
------------------------------------------- - -----
---------
-------
-------结语
本文介绍了如何使用 JavaScript 从 URL 中读取 GET 数据，并提供了示例代码以帮助你实现该功能。如果你在实践中遇到任何问题，请随时查看相关的 API 文档或向社区寻求帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28139