正文

如何巧妙使用jQuery防止表单重复提交，保护你的网站稳定运行

/0 浏览量
0517

防止jQuery表单重复提交的方法

在网站开发中，防止表单重复提交是一个常见的需求，它可以有效保护网站的稳定运行，避免因为多次提交导致的数据库错误或其他问题。以下是使用jQuery巧妙防止表单重复提交的一些方法。

1. 使用jQuery的.submit()事件委托

通过使用事件委托，我们可以在表单外部处理提交事件，这样可以避免在表单元素上直接绑定事件。以下是使用.submit()事件委托防止重复提交的示例代码：

<form id="myForm">
  <!-- 表单内容 -->
  <button type="submit">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('#myForm').on('submit', function(e) {
    e.preventDefault();
    if ($('#myForm').is(':submitting')) {
      return;
    }
    $('#myForm').addClass('submitting');
    // 发送表单数据
    $.ajax({
      url: this.action,
      type: this.method,
      data: new FormData(this),
      processData: false,
      contentType: false,
      success: function(response) {
        // 处理成功结果
        $('#myForm').removeClass('submitting');
      },
      error: function() {
        // 处理错误
        $('#myForm').removeClass('submitting');
      }
    });
  });
});
</script>

在上面的代码中，当表单尝试提交时，会检查一个自定义的submitting类是否存在。如果存在，则阻止提交；否则，将添加该类并继续提交表单。

2. 使用jQuery.blockUI插件

jQuery.blockUI是一个非常有用的插件，可以用来阻止用户进行某些操作，直到当前操作完成。以下是如何使用该插件防止重复提交的示例：

<form id="myForm">
  <!-- 表单内容 -->
  <button type="submit">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.blockUI@2.70/jquery.blockUI.min.js"></script>
<script>
$(document).ready(function() {
  $('#myForm').on('submit', function(e) {
    e.preventDefault();
    $.blockUI({
      message: '正在提交，请稍候...',
      css: {
        border: 'none',
        padding: '15px',
        backgroundColor: '#000',
        color: '#fff'
      }
    });
    // 发送表单数据
    $.ajax({
      url: this.action,
      type: this.method,
      data: new FormData(this),
      processData: false,
      contentType: false,
      success: function(response) {
        // 处理成功结果
        $.unblockUI();
      },
      error: function() {
        // 处理错误
        $.unblockUI();
      }
    });
  });
});
</script>

在这个例子中，当用户点击提交按钮时，会显示一个阻止用户进行其他操作的对话框，直到表单数据被成功提交或发生错误。

3. 使用JavaScript计时器

另一种防止重复提交的方法是使用JavaScript计时器。以下是如何实现这一点的示例：

<form id="myForm">
  <!-- 表单内容 -->
  <button type="submit">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  var isSubmitting = false;

  $('#myForm').on('submit', function(e) {
    e.preventDefault();
    if (isSubmitting) {
      return;
    }
    isSubmitting = true;
    // 发送表单数据
    $.ajax({
      url: this.action,
      type: this.method,
      data: new FormData(this),
      processData: false,
      contentType: false,
      success: function(response) {
        // 处理成功结果
        setTimeout(function() {
          isSubmitting = false;
        }, 1000);
      },
      error: function() {
        // 处理错误
        setTimeout(function() {
          isSubmitting = false;
        }, 1000);
      }
    });
  });
});
</script>

在这个例子中，当表单提交成功或发生错误时，我们设置了一个计时器，在1秒后重置isSubmitting标志，从而允许再次提交表单。

以上三种方法都是有效的防止jQuery表单重复提交的方法，您可以根据自己的需求和喜好选择适合的方法。

-- 展开阅读全文 --