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

获取全局var以获取ajax调用次数;

isLoadedAll=4; // 4，让4为$.ajax来电的号码。

使用一个容器加载图片。成功之后调用一个检查所有ajax成功的函数。

 function checkAllLoaded(){
--isLoadedAll;
if(isLoadedAll==0)
    //do stop loading image here.
}

发送前

beforeSend: function() {
        $('#container').html("<img class = 'ajload' src='loading.gif' />");
        $('#container1').html("<img class = 'ajload' src='loading.gif' />");
}

每次成功

success: function(data)
         {
              checkAllLoaded();
              //do other stuff here
         }

希望有所帮助。

Answer 2

Ajaxcomplete（）描述：注册Ajax请求完成时要调用的处理程序。这是一个AjaxEvent。

您必须创建叠加层和中心加载div，请参阅 Exmaple Here ，例如：
```
<div class="loading">Loading</div>
```
您之后创建了一个全局变量，例如var count=0，并在每个成功函数中递增此变量，例如count++;：
```
success: function (data) {
      .....
      count++;
}
```

之后您可以使用在每个ajax请求之后执行的 Ajaxcomplete() 函数内的条件，例如：

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

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

希望这会回答你的问题。

Answer 3

首先将ajax加载器图像加载为：

$(document).ajaxStart(function () {
        //here call your ajax loader image
});

在ajax完成后隐藏你的加载程序图像

$(document).ready(function(){
    $.when($.ajax(...), $.ajax(...)).then(function (resp1, resp2) {
    //this callback will be fired once all ajax calls have finished.
    // here hide your ajax loader image
  });
});

检查此link

结合多个Ajax加载函数

3 个答案: