如何重置ajax的先前響應並在每次點擊時加載當前的響應？

Question

我正在嘗試爲我的圖形實現一個過濾器，因此圖形將根據所選日期進行更改。元素使用ajax調用。加載第一個響應之後，我想清除第一個響應IF和ONLY，如果在click事件中再次更改了過濾器參數。 我的Ajax代碼是：

var dataset = jQuery("form#sortby").serialize(); 
    var elements = []; 
    var counter; 
    jQuery.ajax({ 
      type: 'POST', 
      url: 'doughnut-top-ten.php', 
      data: dataset, 
      success: function(response){ 
      jQuery('#loading').hide(); 
      jQuery('#morris_donut_graph').hide(); 
      jQuery('#morris_donut_graph_filtered').show(); 
      $('#StudentID').val() 
      var jsonData = JSON.parse(response); 
      for (var i = 0; i < jsonData.length; i++) { 
        counter = jsonData[i]; 
        var sale = roundFloat(counter.sales,2); 
        elements.push({ 
         value: sale, 
         label: counter.product_name 
        }); 
      } 
      /*Donut Graph*/ 
      Morris.Donut({ 
       element: 'morris_donut_graph_filtered', 
       data: elements, 
       resize: true, 
       redraw: true, 
       backgroundColor: '#ffffff', 
       labelColor: '#999999', 
       colors:['#1FB5AC','#F74C4C','#F8A188','#9972B5','#37FFFF','#F30D0D','#5B5BF9','#A5F133','#F24C96','#FBD109',], 
       formatter: function(x) { 
        return "$" + x 
       } 
      }); 
      } 

Answer 1

如果你可以改變服務器的代碼，一個方法是一個requestId添加到每個AJAX請求的請求數據集。該響應返回數據和此請求標識符。

然後，您會檢查您收到的回覆是否與當前的requestId匹配，如果是，則照常執行操作。否則，你會簡單地忽略響應，因爲它很舊。

下面是實現的簡化版本：

var dataset = jQuery("form#sortby").serialize(); 
var currentRequestId = generateNewRequestId(); 
dataset.requestId = currentRequestId; 
var elements = []; 
var counter; 
jQuery.ajax({ 
     type: 'POST', 
     url: 'doughnut-top-ten.php', 
     data: dataset, 
     success: function(response){ 
     // Ignore if the requestId received in the 
     // response doesn't match the currentRequestId 
     if(response.requestId != currentRequestId) return; 

     jQuery('#loading').hide(); 
     jQuery('#morris_donut_graph').hide(); 
     jQuery('#morris_donut_graph_filtered').show(); 
     $('#StudentID').val() 
     var jsonData = JSON.parse(response); 
     for (var i = 0; i < jsonData.length; i++) { 
       counter = jsonData[i]; 
       var sale = roundFloat(counter.sales,2); 
       elements.push({ 
        value: sale, 
        label: counter.product_name 
       }); 
     } 
     /*Donut Graph*/ 
     Morris.Donut({ 
      element: 'morris_donut_graph_filtered', 
      data: elements, 
      resize: true, 
      redraw: true, 
      backgroundColor: '#ffffff', 
      labelColor: '#999999', 
      colors:['#1FB5AC','#F74C4C','#F8A188','#9972B5','#37FFFF','#F30D0D','#5B5BF9','#A5F133','#F24C96','#FBD109',], 
      formatter: function(x) { 
       return "$" + x 
      } 
     }); 
     } 

generateNewRequestId()可以每次返回一個隨機字符串/整數，或者它可以返回的數據集輸入的串聯。在後一種情況下，您將擁有一個優勢，即可以重複使用具有相同數據集的兩個請求的響應。