javascript - 组合多个 Ajax 加载函数

Question

我正在制作一个仪表板报告工具，可以在选择某些过滤器时加载多个图表。我使用 Ajax 加载图表并使用 Ajaxload有一个小圆圈作为等待符号。类似于:

我想将所有这些圆圈合并为中心的一个圆圈，就像任何普通的电子商务网站一样。 ajax代码如下:

$.ajax({
    type: "POST",
    data: {
        "jsontring": JSON.stringify(output)
    },
    url: "http://localhost:8080/sales",
    contentType: "application/json",
    dataType: "json",
    cache: false,
    beforeSend: function () {
        $('#container').html("<img class = 'ajload' src='loading.gif' />");
        $('#container1').html("<img class = 'ajload' src='loading.gif' />");
    },

    success: function (data) {
        datavol = data.Vol
        dataval = data.Val
        $('#container').highcharts(datavol);
        $('#container1').highcharts(dataval);
    },
    error: function () {
        alert("Sales Issue!")
    },

});


$.ajax({
    type: "POST",
    url: "http://localhost:8080/soc",
    data: {
        "jsontring": JSON.stringify(output)
    },
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    cache: false,
    beforeSend: function () {
        $('#container3').html("<img class = 'ajload' src='loading.gif' />");
        $('#container4').html("<img class = 'ajload' src='loading.gif' />");
    },

    success: function (data) {
        datavol = data.Vol
        dataval = data.Val
        $('#container3').highcharts(datavol);
        $('#container4').highcharts(dataval);
    },
    error: function () {
        alert("Soc Issue")
    },

});




$.ajax({
    type: "POST",
    url: "http://localhost:8080/marketshares",
    data: {
        "jsontring": JSON.stringify(output)
    },
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    cache: false,
    beforeSend: function () {
        $('#marketshares').html("<img class = 'ajload' src='loading.gif' />");
        $('#marketshares1').html("<img class = 'ajload' src='loading.gif' />");
    },

    success: function (data) {
        datavol = data.Vol
        dataval = data.Val
        $('#marketshares').highcharts(datavol);
        $('#marketshares1').highcharts(dataval);
    },
    error: function () {
        alert("MarketShares Issues")
    },

});

这个有什么具体的功能吗？

Answer 1

Ajaxcomplete() Description: Register a handler to be called when Ajax requests complete. This is an AjaxEvent.

1. 您必须创建一个叠加层和中心负载 div，参见 Exmaple Here ，例如:

   <div class="loading">Loading</div>
   

2. 之后您必须创建一个全局变量，例如 var count=0 并在每个成功函数中递增此变量，例如 count++; :

   success: function (data) {
         .....
         count++;
   }
   

3. 之后您可以在 Ajaxcomplete() 中使用一个条件 在每个 ajax 请求之后执行的函数，例如:

   $( document ).ajaxComplete(function() {
     if(count == 3) //I guess that you have 3 chart to load
        $('.loading').hide();
   });
   

注意:您可以删除 beforeSend()。

希望这能回答您的问题。