JavaScript 获取参数

在 JavaScript 中，我们可以通过多种方式获取参数，包括 URL 参数、表单参数等。本篇文章将详细介绍 JavaScript 获取参数的几种方式。

一、获取 URL 参数

在浏览器中，我们通常会在 URL 上附带参数，比如 http://example.com?name=John&age=30，这时我们可以使用 JavaScript 来获取 URL 参数。

1. location.search

location.search 可以获取 URL 参数部分，这部分以问号 ? 开头，参数之间使用 & 分隔，每个参数由参数名和参数值组成，中间用等号 = 连接。我们可以使用 split() 函数将其转换为对象，方便获取某个参数的值。

const searchStr = window.location.search.substring(1); // 去除问号
const searchObj = {};
searchStr.split('&').forEach(str => {
  const [key, value] = str.split('=');
  searchObj[key] = value;
});
console.log(searchObj.name); // 'John'
console.log(searchObj.age); // '30'

2. URLSearchParams

URLSearchParams 是一个实验中的 API，它提供了更加简洁的方式来获取 URL 参数。

const searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get('name')); // 'John'
console.log(searchParams.get('age')); // '30'

二、获取表单参数

在 Web 开发中，我们经常需要获取表单中用户输入的数据，这时我们可以使用 JavaScript 来获取表单参数。

1. FormData

FormData 可以用于获取表单中所有控件的值，包括文件上传控件。

<form>
  <label>
    Name:
    <input type="text" name="name">
  </label><br>
  <label>
    Email:
    <input type="email" name="email">
  </label><br>
  <label>
    Password:
    <input type="password" name="password">
  </label><br>
  <label>
    File:
    <input type="file" name="file">
  </label><br>
  <button>Submit</button>
</form>

const formElem = document.querySelector('form');
formElem.addEventListener('submit', e => {
  e.preventDefault(); // 防止表单提交刷新页面
  const formData = new FormData(e.target);
  console.log(formData.get('name')); // Name 的值
  console.log(formData.get('email')); // Email 的值
  console.log(formData.get('password')); // Password 的值
  console.log(formData.get('file')); // File 的值（文件对象）
});

2. querySelector

querySelector 可以用于获取表单中指定控件的值。

<form>
  <label>
    Name:
    <input type="text" name="name">
  </label><br>
  <label>
    Email:
    <input type="email" name="email">
  </label><br>
  <label>
    Password:
    <input type="password" name="password">
  </label><br>
  <button>Submit</button>
</form>

const formElem = document.querySelector('form');
const nameElem = formElem.querySelector('input[name=name]');
const emailElem = formElem.querySelector('input[name=email]');
const passwordElem = formElem.querySelector('input[name=password]');

formElem.addEventListener('submit', e => {
  e.preventDefault(); // 防止表单提交刷新页面
  console.log(nameElem.value); // Name 的值
  console.log(emailElem.value); // Email 的值
  console.log(passwordElem.value); // Password 的值
});

总结

本文介绍了 JavaScript 获取 URL 参数和表单参数的几种方式，包括 location.search、URLSearchParams、FormData 和 querySelector。开发者可以根据实际需求选择不同的方式来获取参数。