JavaScript 获取页面参数

在 web 应用开发中，获取页面的参数是必不可少的一项功能。本文将介绍如何使用 JavaScript 获取页面的参数。

获取 URL 参数

可以在 URL 上附加参数，例如：

http://example.com/?id=1&name=test

要获取 URL 参数，可以使用 window.location.search，它会返回 URL 中 ? 后面的参数部分（不包括 # 号部分）。可以使用 split() 将参数转换成以 & 分隔的数组，再使用 forEach() 遍历数组获取每个参数的名称和值。

const urlParams = new URLSearchParams(window.location.search);
const params = {};

urlParams.forEach(function(value, key) {
  params[key] = value;
});

console.log(params);
// 输出 { "id": "1", "name": "test" }

获取表单参数

另一种获取页面参数的方式是通过表单。当表单被提交时，可以获取表单中的输入值。

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="Submit">
</form>

const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
  event.preventDefault();

  const formData = new FormData(form);
  const params = {};

  formData.forEach(function(value, key) {
    params[key] = value;
  });

  console.log(params);
  // 输出 { "username": "test", "password": "123456" }
});

结语

通过上述方法，可以方便地获取页面的参数，以便在需要时进行处理或发送到后端服务器。