如何中止ajax请求

时间:2016-07-11 11:13:36

标签: javascript jquery ajax

在我的下面的代码中,如果输入搜索值为空,并且搜索关键字相同意味着如果输入'abc'再次获得结果,则需要中止ajax请求,我已经写入了beforesend方法但浏览器抛出错误“无法读取未定义的属性“abort”“

Ajax代码:

    function makeRequest()
    {
    var searchText='';
        var popupRequest = $.ajax({
            url:"cnc/cncstorelocator",
            type:'GET',
            cache:false,
            data: {searchCriteria : $('#cnc-searchcriteria').val()},
            dataType: 'json',
            beforeSend: function(){               
  if(searchText == '' && searchText == searchData) {
                      popupRequest.abort();
                    }
                },
            success : function(cncStoreLocatorData)
            {
                 var store=null;
                for (var i = 0; i < cncStoreLocatorData.length; i++) {
                  var loc = cncStoreLocatorData[i];
                 store = $('<div/>').addClass('pane');
                  var store_hours = loc.hrsOfOperation;
                 var str1 =  $('<p/>').addClass('stores-timing');
                 var store_timings=null;
                  for (var j = 0; j < store_hours.length; j++) {
                         var storetime = store_hours[j];
                        store_timings = str1.append($('<span/>').html('<strong>' + storetime.days_short));
                        store_timings.appendTo(store);
                     }
                  $("#cncstorepane").append(store);
                  searchText=searchData;
                   }
            },
            error: function(cncStoreLocatorData) {
                    alert("can't make req");
                }

          });

    }

2 个答案:

答案 0 :(得分:1)

    var xhr = $.ajax({
    type: "POST",
    url: "XXX.php",
    data: "name=marry&location=London",
    success: function(msg){
       alert( "The Data Saved: " + msg );
    }
});

//kill the request
xhr.abort()

答案 1 :(得分:0)

var xhr = null;
function makeRequest()
    {
    if( xhr != null ) {
            xhr.abort();
            xhr = null;
        }
    var searchText='';
        xhr = $.ajax({
            url:"cnc/cncstorelocator",
            type:'GET',
            cache:false,
            data: {searchCriteria : $('#cnc-searchcriteria').val()},
            dataType: 'json',
            beforeSend: function(){               
            if(searchText == '' && searchText == searchData) {
                      xhr.abort();
                    }
                },
            success : function(cncStoreLocatorData)
            {
                var store=null;
                for (var i = 0; i < cncStoreLocatorData.length; i++) {
                 var loc = cncStoreLocatorData[i];
                 store = $('<div/>').addClass('pane');
                 var store_hours = loc.hrsOfOperation;
                 var str1 =  $('<p/>').addClass('stores-timing');
                 var store_timings=null;
                 for (var j = 0; j < store_hours.length; j++) {
                    var storetime = store_hours[j];
                 store_timings = str1.append($('<span/>').html('<strong>' + storetime.days_short));
                        store_timings.appendTo(store);
                     }
                  $("#cncstorepane").append(store);
                  searchText=searchData;
                   }
            },
            error: function(cncStoreLocatorData) {
                    alert("can't make req");
                }

          });

定义一个变量并为你的ajax提供相同的别名。然后,每次执行该函数时,都会检查(在此示例中为XHR)是否为null。如果不是,则中止()它并再次给它null值。