在JavaScript中使用URL的GET参数-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们通常需要从URL中获取参数来执行相应的操作。这个过程涉及到解析URL并提取其中的参数。本文将介绍如何在JavaScript中使用URL的GET参数。

URL格式

一个URL由多个部分组成，包括协议、主机名、路径和查询字符串等。其中查询字符串是用来传递参数的一种方式。它以?为起始标识符，并用&连接多个参数，例如：

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

在上面的URL中，查询字符串是?key1=value1&key2=value2，其中key1和key2是参数名称，value1和value2是参数值。

解析URL

要访问URL的GET参数，我们需要先从当前页面的URL中获取查询字符串。通过JavaScript提供的window.location.search属性可以轻松地实现这一点。该属性返回从问号开始的完整查询字符串，例如：

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

执行上述代码后，控制台输出的内容将是查询字符串的完整值。

提取参数

获取到查询字符串之后，接下来我们需要将其解析出每个参数及其对应的值。这可以通过 JavaScript 中的 URLSearchParams 对象来实现，例如：

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

这段代码将解析出key1和key2两个参数的值。如果我们希望获取所有参数及其对应的值，可以使用 entries() 方法：

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

执行上述代码后，控制台输出的内容将是所有参数及其对应值。

示例代码

下面是一个完整的示例代码，演示如何从当前页面的URL中获取GET参数，并输出它们的值：

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

在浏览器中打开此HTML文件，通过URL传递GET参数，例如：http://localhost/sample.html?param1=value1&param2=value2，然后查看浏览器控制台的输出。

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