結合多個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

取一個全局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。

1. 您必須創建一個疊加層和中心荷載div，請參見此處的示例 ，例如：

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

2. 之后，您需要創建一個全局變量，例如var count=0並在每個成功函數（例如count++;遞增該變量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() 。

希望這能回答您的問題。

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
  });
});

檢查此鏈接