正文

掌握JavaScript轻松获取GET参数：5种实用方法及实战案例

/0 浏览量
0906

在Web开发中，我们经常需要从URL中获取GET参数来动态地渲染页面或执行其他操作。JavaScript为我们提供了多种方法来轻松获取这些参数。下面，我将介绍五种常用的方法，并通过实战案例展示如何使用它们。

方法一：使用location.search获取查询字符串

location.search属性包含了整个查询字符串，从?开始。我们可以使用字符串操作来提取出我们需要的参数。

代码示例：

function getQueryParam(param) {
  const queryString = window.location.search.substring(1);
  const params = queryString.split('&');
  for (let i = 0; i < params.length; i++) {
    const pair = params[i].split('=');
    if (pair[0] == param) {
      return pair[1];
    }
  }
  return null;
}

// 使用示例
const userId = getQueryParam('userId');
console.log(userId); // 输出参数值

方法二：使用URLSearchParams接口

URLSearchParams接口提供了一个方便的方式来操作查询字符串。这个接口在ES6中被引入。

代码示例：

function getQueryParam(param) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(param);
}

// 使用示例
const userId = getQueryParam('userId');
console.log(userId); // 输出参数值

方法三：使用decodeURIComponent解码URL编码的参数值

GET参数在URL中是经过编码的，使用decodeURIComponent可以将其解码为可读的格式。

代码示例：

function getQueryParam(param) {
  const queryString = window.location.search.substring(1);
  const params = queryString.split('&');
  for (let i = 0; i < params.length; i++) {
    const pair = params[i].split('=');
    if (decodeURIComponent(pair[0]) == param) {
      return decodeURIComponent(pair[1]);
    }
  }
  return null;
}

// 使用示例
const userId = getQueryParam('userId');
console.log(userId); // 输出解码后的参数值

方法四：使用自定义函数简化获取参数

我们可以创建一个自定义函数，将上述方法封装起来，使代码更加简洁。

代码示例：

function getQueryParam(param) {
  const queryString = window.location.search.substring(1);
  const params = queryString.split('&');
  for (let i = 0; i < params.length; i++) {
    const pair = params[i].split('=');
    if (pair[0] === param) {
      return decodeURIComponent(pair[1]);
    }
  }
  return null;
}

// 使用示例
const userId = getQueryParam('userId');
console.log(userId); // 输出解码后的参数值

方法五：使用现代JavaScript语法

在ES6及以上版本中，我们可以使用URLSearchParams结合解构赋值来简化获取参数的过程。

代码示例：

function getQueryParam(param) {
  const { search } = new URLSearchParams(window.location.search);
  return search.get(param);
}

// 使用示例
const userId = getQueryParam('userId');
console.log(userId); // 输出参数值

实战案例

假设我们有一个简单的页面，其中包含一个用户ID作为GET参数。以下是如何使用上述方法在页面上显示这个ID的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>GET 参数示例</title>
</head>
<body>
  <h1>用户信息</h1>
  <p>用户ID: <span id="userId"></span></p>
  <script>
    function getQueryParam(param) {
      const { search } = new URLSearchParams(window.location.search);
      return search.get(param);
    }

    const userId = getQueryParam('userId');
    document.getElementById('userId').textContent = userId;
  </script>
</body>
</html>

在这个例子中，当用户访问页面时，他们的用户ID将自动被提取并显示在页面上。

通过以上五种方法，你可以轻松地在JavaScript中获取GET参数。每种方法都有其独特的用途和优势，你可以根据自己的需求选择最合适的方法。

-- 展开阅读全文 --