使用 jQuery Mobile Ajax Navigation 防止重复表单提交(不禁用 ajax)

Question

在我的表单中，如果您足够快地单击提交两次，我会得到两个成功的表单 ajax 帖子。如何停止重复的帖子？

据我所知

1. 用户点击提交
2. 阿贾克斯帖子已发送
3. 用户点击提交（完整且有效的表单）
4. 阿贾克斯帖子已发送
5. 收到的阿贾克斯回应
6. 页面刷新为空（新的空窗体 - 需要值）
7. 收到的阿贾克斯回应
8. 页面刷新为空（新的空窗体 - 需要值）

表格发送两次，我创建了两个项目。

有类似名称的问题，但它们与禁用验证或禁用 ajax 有关。Ajax，jquery验证和服务器端验证（MVC中的Post-Redirect-Get）对我来说工作得很好。

需要明确的是，我使用的是jQuery Mobile的Ajax导航，所以我没有编写任何ajax。

Answer 1

这就是我现在的解决方案是：

$(document).on('submit', "form", null, function (e) {
    $(this).find("input:submit")
    .attr('disabled', 'disabled')
    // the following is optional, arguably unnecessary
    .delay(2000)
    .queue(function (next) { $(this).removeAttr('disabled'); next(); });
});

（更新以在网络工具包中工作）

延迟只是为了以防万一出现问题。实际上，表单应该被替换，并且替换不会被禁用。

欢迎更好的建议。

Answer 2

$(document.body)
.on("input:submit", "click", function () {
  var $this = $(this);
  if ( !$this.is(".submitting") ) {
    $this.addClass("submitting");
    $.ajax({ url: "etc..."})
    .done(function () {
      // success callback;
    })
    .fail(function () {
      // error callback;
    })
    .always(function () {
      $this.removeClass("submitting");
    })
  }
});

这有一个很好的副作用，你可以用submitting CSS类修改提交按钮的样式。您可以额外/替代地禁用它并在always回调中重新启用它。