Question

我有一个网页。此页面的开头如下：

$(function () {
  PageFunction_1();
  PageFunction_2();
  PageFunction_3();
  PageFunction_4();
});

function PageFunction_1(){
  $.ajax({
        url : endpoint1,
        type : "post",
        async : true,
        success : function(data) {
                //load data to html divs
        }
    });
}

function PageFunction_2(){
  $.ajax({
        url : endpoint2,
        type : "post",
        async : true,
        success : function(data) {
                //load data to html divs
        }
    });
}

function PageFunction_3(){
  $.ajax({
        url : endpoint3,
        type : "post",
        async : true,
        success : function(data) {
                //load data to html divs
        }
    });
}

function PageFunction_4(){
  $.ajax({
        url : endpoint4,
        type : "post",
        async : true,
        success : function(data) {
                //load data to html divs
        }
    });
}

我想在页面加载时显示微调器。所有ajax请求都是异步的。所以我无法确定哪一个是最后一个。我更改此代码如下所示：

    $(function () {
      PageFunction_1();
      PageFunction_2();
      PageFunction_3();
      PageFunction_4();
    });

    function PageFunction_1(){
      $.ajax({
            url : endpoint1,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            },
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            waitingDialog.show('page is loading');
          },
        complete: function () {
            debugger;
            waitingDialog.hide();
        }
        });
    }

    function PageFunction_2(){
      $.ajax({
            url : endpoint2,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            waitingDialog.show('page is loading');
          },
        complete: function () {
            debugger;
            waitingDialog.hide();
        }
        });
    }

    function PageFunction_3(){
      $.ajax({
            url : endpoint3,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            waitingDialog.show('page is loading');
          },
        complete: function () {
            debugger;
            waitingDialog.hide();
        }
        });
    }

    function PageFunction_4(){
      $.ajax({
            url : endpoint4,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            waitingDialog.show('page is loading');
          },
        complete: function () {
            debugger;
            waitingDialog.hide();
        }
        });
    }

但是旋转器在所有加载时间都没有显示。如何向spinner显示多个异步ajax请求？

Answer 1

我阅读了difference async and sync requests教程。我知道了这个问题的答案。我以为是异步的，但我写的代码是同步的。代码应如下所示（使用asyn = true）：

<script>
    $(function () {
      PageFunction_1();
    });

    function PageFunction_1(){
      $.ajax({
            url : endpoint1,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            },
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            waitingDialog.show('page is loading');
          },
        complete: function () {
            debugger;
            PageFunction_2();
        }
        });
    }

    function PageFunction_2(){
      $.ajax({
            url : endpoint2,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");

          },
        complete: function () {
            debugger;
            PageFunction_3();
        }
        });
    }

    function PageFunction_3(){
      $.ajax({
            url : endpoint3,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");

          },
        complete: function () {
            debugger;
            PageFunction_4();
        }
        });
    }

    function PageFunction_4(){
      $.ajax({
            url : endpoint4,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
          },
        complete: function () {
            debugger;
            waitingDialog.hide();
        }
        });
    }
</script>

这些功能与异步运行时，会显示警告微调框消息。

使用一个或多个异步Ajax请求显示Spinner

1 个答案: