无法通过单击取消按钮停止阿贾克斯呼叫

Question

我有一个jQuery脚本。这个概念是，当我点击一个按钮时，它首先调用一个AJAX函数来计算no。来自特定查询的行。然后在成功的调用中，它将行数存储在一个jQuery变量中。

然后它调用一个AJAX函数，该函数每次重复运行以从服务器调用10行数据，在此过程中有一个进度条，每次从db中获取某些数据时都会逐渐增加或填充进度条。当接收到大量数据时，它将被推入全局数组中。当最后的ajax调用返回空白时，或行，那么过程终止。

此外，还有一个按钮以及进度加载器，当它被点击时，将终止AJAX进程来停止调用，并将数据表中显示的数据显示在数据表中。

这里是我的脚本

<script type="text/javascript"> 
var oTable; 
var outer_start_row = 0; 
var outer_limit = 1; 
var final_data = []; 
var cancel = false; 
var total_data = 0; 
$(document).ready(function() { 
    window.prettyPrint() && prettyPrint(); 
    $('#load').click(function() 
    { 
     var v = $('#drp_v').val(); 
     var cnt = $('#drp_cnt').val(); 
     var ctg = $('#drp_ctg').val(); 
     var api = $('#drp_api').val(); 
     var nt = $('#drp_nt').val(); 
     alert("version :"+v+" category :"+ctg+" country :"+cnt); 
     $.post("ajax.php", 
       { 
        'version':v,'category':ctg, 
        'country':cnt,'network_id':nt, 
        'api':api,'func':'total_data' 
       }, 
       function(data) 
       { 
        total_data = data; 
        $("#progress_bar_container").fadeIn('fast'); 
       }); 

     load_data_in_datatable(); 
    }); 
}); 

function stop_it() 
{ 
    cancel == true; 
} 


function load_data_in_datatable() 
{ 
     if(cancel == true) 
     { 
      alert(cancel); 
      return; 
     } 
     else 
     { 
     var v = $('#drp_v').val(); 
     var cnt = $('#drp_cnt').val(); 
     var ctg = $('#drp_ctg').val(); 
     var api = $('#drp_api').val(); 
     var nt = $('#drp_nt').val(); 
     $.post("ajax.php", 
       { 
       'version':v,'category':ctg, 
       'country':cnt,'network_id':nt, 
       'api':api,'func':'show_datatable', 
       'start_row':outer_start_row,'limit':outer_limit 
       }, 
       function(response) 
       { 
        var data = response.data; 
        var limits = response.limits; 
        outer_limit = limits.limit; 
        outer_start_row = limits.start_row; 
        if(data.length > 0) 
        { 
         for(var i = 0; i < data.length; i++) 
         { 
          final_data.push(data[i]); 
         } 
         var current = parseInt(final_data.length); 
         percent_load = Math.round((current/parseInt(total_data))*100); 
         $(".progress-bar").css("width",percent_load+"%"); 
         $(".progress-bar").text(percent_load+"%"); 
         load_data_in_datatable(); 
        } 
        else 
        { 
         create_datatable(); 
         cancel = true; 
         return; 
        } 
       },'json'); 
     }  
} 

function create_datatable() 
{ 
    $("#progress_bar_container").fadeOut('fast'); 
    var aColumns = []; 
    var columns = []; 
    for(var i = 0; i < final_data.length; i++) 
    { 
     if(i>0) 
      break; 
     keycolumns = Object.keys(final_data[i]); 
     for(j = 0; j < keycolumns.length; j++) 
     { 
      if($.inArray(keycolumns[j],aColumns.sTitle)<=0) 
      { 
       aColumns.push({sTitle: keycolumns[j]}) //Checks if 
       columns.push(keycolumns[j]) //Checks if 
      }         
     } 

    } 

    var oTable = $('#jsontable').dataTable({ 
     "columns":aColumns, 
     "sDom": 'T<"clear">lfrtip', 
      "oTableTools": { 
       "aButtons": [ 
        { 
          "sExtends": "csv", 
          "sButtonText": "CSV", 
        } 
       ] 
      } 
    }); 
    oTable.fnClearTable(); 
    var row = [] 
    for(var i = 0; i < final_data.length; i++) 
    { 
     for(var c = 0; c < columns.length; c++) 
     { 
       row.push(final_data[i][columns[c]]) ; 
     } 
     oTable.fnAddData(row); 
     row = []; 
    } 
} 
</script> 

的问题是，取消按钮点击的时候，我不能停止的AJAX。

Answer 1

检查链接描述如何中止（停止/ cancle）ajax请求。

jquery允许您使用.abort（）方法停止ajax请求。

Aborting an AJAX request

Answer 2

function stop_it() { 
    cancel == true; 
} 

这个功能似乎是错的，你需要真正赋给变量取消，但你有误写成比较操作（相当于/ ==），而不是它应该是：

function stop_it() { 
    cancel = true; 
} 

我想你在调用这个函数的同时在进程间停止AJAX。