使用 JavaScript 防止重复提交

在一些 web 应用程序中，防止用户多次提交同一请求是一项重要的任务。JavaScript 可以提供一种简单而有效的方式来解决这个问题。

实现原理

当用户单击提交按钮时，JavaScript 会禁用该按钮，防止用户再次点击。同时，它会向服务器发送一个 ajax 请求。如果服务器成功处理了请求并返回响应，则 JavaScript 将启用该按钮，使用户可以继续提交。

代码示例

以下是一个示例，说明如何使用 JavaScript 防止重复提交：

<form onsubmit="submitForm(event)">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

<script>
function submitForm(event) {
  event.preventDefault();

  var form = event.target;
  var button = form.querySelector('[type="submit"]');

  if (button.disabled) {
    return;
  }

  button.disabled = true;

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      button.disabled = false;

      if (xhr.status == 200) {
        alert('Form submitted successfully');
      } else {
        alert('Form submission failed');
      }
    }
  };

  xhr.open(form.method, form.action);
  xhr.send(new FormData(form));
}
</script>

解释说明

在上面的示例中，我们添加了一个 submitForm 函数来处理表单提交。该函数会禁用提交按钮，然后使用 XMLHttpRequest 对象发送 ajax 请求。

当服务器返回响应时，onreadystatechange 事件处理程序会重新启用提交按钮，以便用户可以继续提交。如果响应状态码为 200，则说明提交成功。否则，说明提交失败。

结论

使用 JavaScript 防止重复提交是一种简单有效的方式来解决 web 应用程序中的重复提交问题。该方法可以很容易地集成到现有代码中，并可以在 ajax 请求中实现。