通过 Ajax 提交表单答案

【问题标题】：Submitting form through Ajax通过 Ajax 提交表单
【发布时间】：2015-12-09 11:31:51
【问题描述】：

我的问题很简单 -

我正在使用 jquery 和 ajax 提交表单。单击按钮时，数据将提交到数据库。

问题 - 如果用户单击提交两次，则数据库中有两个条目。我该如何解决这个问题？

我不能使用 .one() 因为提交按钮会调用验证函数，如果发生错误，数据将不会被提交。所以，用户必须再次调用相同的函数。

显然我可以使用 .success 上的变量来做到这一点。但是解决这个问题的最佳方法是什么。

感谢您的帮助。

【问题讨论】：

用JS禁用按钮，直到收到响应并弹出响应！
添加在 DOM 之上绘制的覆盖元素，然后用户无法与您的元素交互，一旦 ajax 完成删除覆盖
如果你想在 db 中添加一个 UNIQUE 约束。还使用会话和令牌

标签： php jquery mysql ajax

【解决方案1】：

覆盖以防止点击是一种方法。

如果你想要即插即用的东西，blockUI.js 很好。你只需要

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

或者您可以只使用.ajaxstart() 和.ajaxstop() 自己覆盖一个元素以启用和禁用提交按钮。

【讨论】：

【解决方案2】：

您可以在提交表单后禁用submit 按钮。任何表单都只能使用Submit 按钮提交。所以：

$(form).submit(function () {
  $(this).find("input:submit").prop("disabled", true);
  // You can enable it back once the AJAX request is successful.
  $.ajaxSuccess(function () {
    $(form).find("input:submit").prop("disabled", false);
  });
});

【讨论】：