Question

我在我的应用中遇到重复的ajax调用问题。这是我的jQuery代码：

$(document.body).on('click', 'a.sample', function(event) {
   event.preventDefault();

   $('#UniqueFormId').submit(function(event) {
      event.preventDefault();

      // HERE IS AJAX CALL //

      return false;
   });
});

当我在a.sample按钮上点击几次而未提交#UniqueFormId表单时，会出现问题。然后用提交表单的下一个单击按钮进行重复的ajax调用。

我使用$(document.body)因为我在ajax调用后不会使用它。我怎么能避免重复的ajax调用？

Answer 1

你可以1使用一个不依赖于任何DOM交互的简单标志，然后2重构提交处理程序，使其在click事件之外设置。您只希望click事件触发ajax提交，而不是设置处理程序。

在这种情况下，如果设置为true，is_sending将强制提交功能退出。您可以看到这是在beforeSend回调中设置的，并在complete回调中被清除（成功和错误都被调用，因此它将始终允许重试。根据您的喜好调整此... ）

希望这有帮助并且有意义！此模式应确保在此特定表单的任何给定时间只有一个ajax请求处于活动状态。

var is_sending = false; // Default to false, then set to true when ajax request starts...

$(document.body).on('click', 'a.sample', function(event) {
   event.preventDefault();
   $('#UniqueFormId').submit();
});

$('#UniqueFormId').submit(function(event) {
    event.preventDefault();
    if (is_sending) return false;
    $.ajax({
      ...
      beforeSend: function () {
        is_sending = true;
      },
      complete: function () {
        is_sending = false;
      },
      success: function (response) {
        // Do whatever...
      }
    });
 });

Answer 2

您可以在点击事件后禁用该按钮，然后在success/error回调ajax请求后启用它：

$('#UniqueFormId').submit(function(event) {
      event.preventDefault();

      var _this = $(this);
      _this.attr('disabled', 'disabled'); //disable the button

      // IN AJAX CALLBACK
      _this.removeAttr('disabled'); //enable the button again

      return false;
});

$(document.body).on('click', 'a.sample', function(event) {
   event.preventDefault();

   //Load your Modal here
});

希望这有帮助。

Answer 3

只需将submit()和click()函数

分开即可

$('#UniqueFormId').submit(function(event) {
  event.preventDefault();

       // HERE IS AJAX CALL //

       return false;
   });

$(document.body).on('click', 'a.sample', function(event) {
    event.preventDefault();
   $('#UniqueFormId').submit();
 });

jQuery .on（＆＃39;点击＆＃39;）复制ajax调用

3 个答案: