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

Question

在我的表单中，如果您快速点击提交两次，我会获得两个成功的表单ajax帖子。如何停止重复发帖？

据我所知

1. 用户点击提交
2. 发送Ajax帖子
3. 用户点击提交（已完成且有效的表单）
4. 发送Ajax帖子
5. 收到Ajax回复
6. 页面刷新为空（新的空表单 - 需要值）
7. 收到Ajax回复
8. 页面刷新为空（新的空表单 - 需要值）

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

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

为了清楚我正在使用jQuery Mobile's Ajax navigation所以我没有写任何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(); });
});

（已更新，可在webkit中使用）

延迟是为了防止出现问题。实际上，表格应该被替换，并且不会禁用替换。

欢迎提出更好的建议。

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回调中重新启用它。