添加参数提交表单 JavaScript

在 Web 开发中，表单提交是非常常见的操作，而有时我们可能需要在提交表单时同时携带一些额外的参数。本文将介绍如何使用 JavaScript 实现在提交表单时添加参数。

方式一：使用 hidden input 元素

这是一种常见的方式，可以添加一个隐藏的 input 元素，将需要传递的参数放在其中，然后在表单提交时一同提交。

<form id="myForm" action="submit.php" method="post">
  <input type="hidden" name="extraParam" value="something">
  <!-- 其他表单元素 -->
  <button type="submit">提交</button>
</form>

const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  // 阻止表单默认行为
  event.preventDefault();
  
  // 获取表单数据
  const formData = new FormData(form);
  
  // 构造额外参数
  formData.append('extraParam2', 'something else');
  
  // 发送表单数据
  fetch(form.action, {
    method: form.method,
    body: formData
  }).then(response => {
    if (response.ok) {
      // 成功处理响应
    } else {
      // 处理错误响应
    }
  }).catch(error => {
    // 处理异常
  });
});

方式二：使用 URLSearchParams 对象

在上面的示例中，我们使用了 FormData 对象来构造表单数据。FormData 对象是一个比较专用的 API，只能通过 form 元素来实例化。而使用 URLSearchParams 对象则更加通用，可以直接通过传递字符串参数或者对象参数来实例化。

<form id="myForm" action="submit.php" method="post">
  <!-- 其他表单元素 -->
  <button type="submit">提交</button>
</form>

const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  // 阻止表单默认行为
  event.preventDefault();
  
  // 构造额外参数
  const searchParams = new URLSearchParams();
  searchParams.set('extraParam', 'something');
  searchParams.set('extraParam2', 'something else');
  
  // 获取表单数据
  const formData = new FormData(form);
  
  // 发送表单数据
  fetch(`${form.action}?${searchParams.toString()}`, {
    method: form.method,
    body: formData
  }).then(response => {
    if (response.ok) {
      // 成功处理响应
    } else {
      // 处理错误响应
    }
  }).catch(error => {
    // 处理异常
  });
});

总结

上述两种方式都比较简单，可以根据实际情况选择使用。需要注意的是，如果需要传递多个参数，建议使用 URLSearchParams 对象。同时，在发送请求时，需要使用 fetch API，可以使用 polyfill 来兼容旧版本浏览器。