jquery防止页面刷新重复提交

原创

mob64ca12e732bb 2023-12-08 08:13:19 ©著作权

文章标签 表单重复提交 jQuery 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e732bb的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery防止页面刷新重复提交

在Web开发中，经常会遇到需要提交表单的场景。然而，有时用户可能会不小心多次点击提交按钮，导致表单重复提交，这会带来一些问题，比如重复插入数据、重复发送邮件等。为了解决这个问题，我们可以使用jQuery来防止页面刷新重复提交。

原理介绍

防止页面刷新重复提交的原理很简单，就是在表单提交后，禁用提交按钮，防止用户再次点击。我们可以通过以下步骤来实现：

使用jQuery选择器选中表单，并监听表单的提交事件。
在表单提交事件处理函数中，使用preventDefault()方法阻止表单默认提交的行为。
在表单提交事件处理函数中，禁用提交按钮，防止用户再次点击。
在表单提交成功后，启用提交按钮，以便用户可以再次提交表单。

下面是一个示例代码：

$(document).ready(function() {
  $("form").submit(function(event) {
    event.preventDefault(); // 阻止表单默认提交的行为

    $("button[type='submit']").prop("disabled", true); // 禁用提交按钮

    // 使用Ajax提交表单
    $.ajax({
      url: "submit.php",
      type: "POST",
      data: $(this).serialize(),
      success: function(response) {
        // 处理提交成功后的逻辑

        // 启用提交按钮
        $("button[type='submit']").prop("disabled", false);
      },
      error: function() {
        // 处理提交失败后的逻辑

        // 启用提交按钮
        $("button[type='submit']").prop("disabled", false);
      }
    });
  });
});

在上面的代码中，我们使用了$(document).ready()方法来确保页面加载完成后再执行代码。然后使用$("form").submit()方法来监听表单的提交事件。在事件处理函数中，我们使用event.preventDefault()方法来阻止表单默认提交的行为。然后使用$("button[type='submit']").prop("disabled", true)来禁用提交按钮。接下来，我们使用了Ajax来提交表单数据，成功和失败的回调函数中，我们都启用了提交按钮，以便用户可以再次提交表单。