JavaScript 防止方法 POST 重新加载

在 web 开发中，经常使用表单提交数据到服务器，常用的请求方法是 POST。但是，用户可能在提交表单后无意间或者误操作造成重复提交的情况，这样会导致数据重复插入或者操作被执行多次。为了解决这个问题，可以在 JavaScript 中使用一些方法来防止 POST 重复提交。

禁用表单提交按钮

将表单提交按钮设为 disabled 状态，这样用户就不能再次点击提交按钮，从而避免重复提交的问题。

const form = document.querySelector('form');
const submitBtn = form.querySelector('input[type="submit"]');

submitBtn.onclick = function () {
  submitBtn.disabled = true;

  // ...
};

重定向表单

在提交表单后，可以通过重定向表单的方式防止用户再次提交。

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

form.onsubmit = function () {
  if (form.getAttribute(submitFlag) !== null) {
    return false;
  }

  form.setAttribute(submitFlag, 'true');
  location.reload();

  return false;
};

AJAX 支持

使用 AJAX 技术，可以在后台处理表单数据，避免用户重复提交的问题。

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

form.onsubmit = function () {
  if (form.getAttribute(submitFlag) !== null) {
    return false;
  }

  form.setAttribute(submitFlag, 'true');

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/submit', true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      form.removeAttribute(submitFlag);
    }
  };
  xhr.send(new FormData(form));

  return false;
};

以上就是几种防止 POST 重复提交的 JavaScript 方法，它们各有优缺点，可以根据具体情况选择使用。