Отменить вызов JQuery AJAX до его возвращения?

Question

У меня есть диалоговое окно jQuery, которое открывается, а затем выполняется вызов AJAX. Я хотел бы сделать так, чтобы в случае закрытия диалогового окна или нажатия кнопки отмены вызов AJAX был отменен и его функция обратного вызова не вызывалась. Я могу придумать несколько способов сделать это с помощью переменной, например:

  function doStuff(){
    var doCallback = true;
    $('#dialog').dialog({
      title: 'Dialog Title',
      modal: true,
      buttons: {
        Cancel: function() {
          doCallback = false;
          doSomethingElse();
        }
      }
    });
    $.get('url/url/url', function(data){
      if(doCallback){
        doTheSuccessThing(data);
      }
    });
  }

Но мне это кажется грязным, и это не мешает завершению вызова AJAX. Есть ли встроенный способ отменить текущий вызов AJAX?

Answer 1

Когда у меня есть обратный вызов, который может быть запущен несколько раз, но я хочу использовать только последний, я использую этот шаблон:

var resultsXHR, resultsTimer, resultsId=0;
$('input').keyup(function(){
  clearTimeout(resultsTimer);                     // Remove any queued request
  if (resultsXHR) resultsXHR.abort();             // Cancel request in progress
  resultsTimer = setTimeout(function(){           // Record the queued request
    var id = ++resultsId;                         // Record the calling order
    resultsXHR = $.get('/results',function(data){ // Capture request in progress
      resultsXHR = null;                          // This request is done
      if (id!=resultsId) return;                  // A later request is pending
      // ... actually do stuff here ...
    });  
  },500);                                         // Wait 500ms after keyup
});

Одного abort() недостаточно, чтобы предотвратить успешный обратный вызов; вы все равно можете обнаружить, что ваш обратный вызов запущен, даже если вы пытались отменить запрос. Вот почему необходимо использовать трекер resultsId и сделать так, чтобы ваш обратный вызов прекратил обработку, если другой, более поздний перекрывающийся обратный вызов готов к работе.

Учитывая, насколько это распространено и обременительно, я думаю, что это хорошая идея, чтобы обернуть его в многократное использование, не требуя, чтобы вы придумывали уникальный триплет имен локальных переменных для каждого, который вы хотите обработать :

(function($){
  $.fn.bindDelayedGet = function(event,delay,url,dataCallback,dataType,callback){
    var xhr, timer, ct=0;
    return this.bind(event,function(){
      clearTimeout(timer);
      if (xhr) xhr.abort();
      timer = setTimeout(function(){
        var id = ++ct;
        xhr = $.get(url,dataCallback && dataCallback(),function(data){
          xhr = null;
          if (id==ct) callback(data);
        },dataType);
      },delay);
    });
  };
})(jQuery);

// In action
var inp = $('#myinput').bindDelayedGet('keyup',400,'/search',
  function(){ return {term:inp.val()}; },
  'html',
  function(html){ $('#searchResults').clear().append(html); }
);

Вы можете найти вышеуказанный код более подробно на моем сайте .

Answer 2

Хорошо, поэтому, основываясь на предложении использовать объект XmlHttpRequest, возвращенный функцией $ .get, я придумал это:

function doStuff(){
    var ajaxRequest = $.ajax({
                        url : 'url/url/url',
                        type : "GET",
                        success : function(data){
                          ajaxRequest = null;
                          doSuccessStuff(data);
                        }
                      });

    $('#dialog').dialog({
      title: 'Stuff Dialog',
      bgiframe: true,
      modal: true,
      buttons: {
        Cancel: function() {
          if (ajaxRequest)
            ajaxRequest.abort();
          doCancelStuff();
        }
      }
    });
  }

Мне кажется, что он работает и чувствует себя чище.

Answer 3

Нет метода в jQuery, но вы можете просто использовать объект XmlHttpRequest, возвращенный из функций get / post / ajax jQuery.

Из блога jQuery :

// Perform a simple Ajax request
var req = $.ajax({
  type: "GET",
  url: "/user/list/",
  success: function(data) {
    // Do something with the data...
    // Then remove the request.
    req = null;
  }
});

// Wait for 5 seconds
setTimeout(function(){
  // If the request is still running, abort it.
  if ( req ) req.abort();
}, 5000);

Answer 4

Похоже, хотя я никогда этого не делал.

$.get возвращает объект XmlHttpRequest, который имеет метод abort(), который вы можете вызвать. Может быть, попробовать?

Answer 5

Если вы поместите условное выражение в сценарий, к которому вы добавляете ajax, где при условии, что условие истинно, вы выводите html, иначе вы ничего не выводите, тогда вы можете выполнить простую проверку if (html) в функции успеха, например так: :

$.ajax({
      type: "GET",
      url: "url.php",
      data: "data="+data,
      success: function(html)
          { 
              if(html){
              $("#container").empty().html(html);
              }
      }
});

в этом примере url.php может выглядеть примерно так:

$data = $_GET['data'];

if($data=="whatever"){
     echo "<div>Hello</div>";
}else{}

Это сработало для меня. Я знаю, что этот пост старый, но надеюсь, что он кому-нибудь поможет.