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

Question

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

据我所知

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

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

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

为了清楚我正在使用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 回调中重新启用它。