JavaScript怎么防止表单重复提交

今天小编给大家分享一下JavaScript怎么防止表单重复提交的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

背景

假设我们正在开发一个应用，该应用允许用户上报突发事件。用户需要填写一系列信息并提交表单。为了避免用户在网络延迟或者误操作的情况下多次点击提交按钮，我们需要在代码中加入防止重复提交的逻辑。

小白级别：简单粗暴的禁用提交按钮

一种简单的方法是在提交表单时禁用提交按钮。这可以在JavaScript中通过以下代码实现：

document.getElementById("submitBtn").disabled = true;

这样，在用户点击提交按钮后，按钮就会变为不可用状态，防止用户再次点击。但是，这种方法存在一个问题：如果提交失败，用户无法再次点击提交按钮，除非刷新页面。

进阶级别：使用标志变量

为了解决上述问题，我们可以使用一个标志变量来跟踪提交状态。当用户提交表单时，我们将标志变量设置为

true

false

var submitting = false; // 定义一个变量用于跟踪提交状态 - Define a variable to track the submission status
 
function onSubmit() {
  if (submitting) {
    alert("请勿重复提交！");
    return;
  }
 
  submitting = true;
 
  // 提交表单的逻辑...
  
  // 提交结束后，将提交状态设置回 false
  submitting = false;
}

大神级别：优雅地处理 AJAX 请求

在实际项目中，我们通常使用 AJAX 进行表单提交，以实现无刷新更新页面。为了更好地处理重复提交问题，我们可以在 AJAX 请求的开始和结束时更新提交状态。这样，我们可以确保在请求尚未结束时，用户无法再次点击提交按钮。示例代码如下：

var submitting = false; // 定义一个变量用于跟踪提交状态 - Define a variable to track the submission status
 
function submit() {
  if (submitting) {
    layer.msg("请勿重复提交！", {icon: 5, time: 2000});
    return false;
  }
 
  submitting = true;
 
  // ... 其他表单验证代码
 
  var reportPage = top.layer.open({
    // ... 其他属性配置
    yes: function (data) {
    // ... 其他逻辑代码
    var result = ajax返回的结果
    if (result.code == '0') {
        layer.msg("成功", {icon: 6, time: 2000});
    } else {
        layer.msg("失败", {icon: 5, time: 2000});
    }
    // 请求结束，将提交状态设置回 false
    submitting = false;
    },
    btn2: function (index, layero) {
        top.layer.close(reportPage); // 关闭当前页面
    }
  });
  return false;
}

通过上述代码，我们可以确保在 AJAX 请求进行中，用户无法再次点击提交按钮。当请求结束后，不论成功或失败，我们都将提交状态设置回 `false`，使得用户可以在需要时再次点击提交按钮。