jquery - 如何重置 ajax 的先前响应并在每次点击时加载当前响应？

Question

我正在尝试对我的图表实现过滤器，以便图表将根据所选日期进行更改。使用 ajax 调用这些元素。加载第一个响应后，我想清除第一个响应当且仅当过滤器参数在单击事件时再次更改。我的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() 每次可以返回一个随机字符串/整数，也可以返回数据集输入的串联。在后一种情况下，您将拥有一个优势，即可以重复使用具有相同数据集的两个请求的响应。