0

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

据我所知

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

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

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

为了清楚起见，我正在使用jQuery Mobile 的 Ajax 导航，所以我没有编写任何 ajax。

4

2 回答 2

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 中工作）

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

欢迎提出更好的建议。

于 2012-11-21T20:33:16.143 回答
0 
$(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");
    })
  }
});

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

于 2012-11-21T20:31:49.930 回答