Question

我对JavaScript不是很熟悉。请参阅以下代码：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script type = "text/javascript">

    function GetSQLTable() {
        //alert($("#<%=fieldGroupReferences.ClientID%>")[0].value)
        var str = $("#<%=fieldGroupReferences.ClientID%>")[0].value
        var res = str.split(",");
        for (var i = 0; i < res.length; i++) {
            $("#LoadingImage").show();
            var div = document.createElement('div');
            div.id = "div" + i
            document.body.appendChild(div);

            //alert(res[i]);
            $.ajax({
                type: "POST",
                url: "Default3.aspx/GetSQLTable",
                data: '{username: "' + $("#<%=fieldUserName.ClientID%>")[0].value + '", terminalname: "' + $("#<%=fieldTerminalName.ClientID%>")[0].value + '", terminalip: "' + $("#<%=fieldTerminalIP.ClientID%>")[0].value + '", mappingid: "' + res[i] + '", usergroup: "' + $("#<%=fieldUserGroup.ClientID%>")[0].value + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess(i,res.length),
                failure: function (response) {
                    //alert(response.d);
                    alert('there was an error loading the webpage')
                }
            });
        }
        function OnSuccess(i,totalrows) {
            return function (response) {
                if (response.d != "") {
                    document.getElementById('div' + i).innerHTML = document.getElementById('div' + i).innerHTML + '<br>' + '<br>' + response.d;
                }
            }
        }
    }
    window.onload = GetSQLTable
</script>

代码逐步构建一个网页，即获取x个HTML表格，并在它们准备就绪时显示给网页。这很有效。

问题是我不知道如何在网页完成后删除LoadingImage，即$("#LoadingImage").hide();。 OnSuccess被调用x次，具体取决于返回的表数，所以我不能把它放在那里。

Answer 1

一种方法是计算成功的onSuccess（）调用次数，并在完成后隐藏加载图像：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script type = "text/javascript">

    function GetSQLTable() {
        //alert($("#<%=fieldGroupReferences.ClientID%>")[0].value)
        var str = $("#<%=fieldGroupReferences.ClientID%>")[0].value
        var res = str.split(",");
        var numSucceeded = 0;
        for (var i = 0; i < res.length; i++) {
            $("#LoadingImage").show();
            var div = document.createElement('div');
            div.id = "div" + i
            document.body.appendChild(div);

            //alert(res[i]);
            $.ajax({
                type: "POST",
                url: "Default3.aspx/GetSQLTable",
                data: '{username: "' + $("#<%=fieldUserName.ClientID%>")[0].value + '", terminalname: "' + $("#<%=fieldTerminalName.ClientID%>")[0].value + '", terminalip: "' + $("#<%=fieldTerminalIP.ClientID%>")[0].value + '", mappingid: "' + res[i] + '", usergroup: "' + $("#<%=fieldUserGroup.ClientID%>")[0].value + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess(i,res.length),
                failure: function (response) {
                    //alert(response.d);
                    alert('there was an error loading the webpage')
                }
            });
        }
        function OnSuccess(i,totalrows) {
            return function (response) {
                if (response.d != "") {
                    document.getElementById('div' + i).innerHTML = document.getElementById('div' + i).innerHTML + '<br>' + '<br>' + response.d;
                    numSucceeded++;
                    if (numSucceeded === totalrows) {
                      $("#LoadingImage").hide();
                    }
                }
            }
        }
    }
    window.onload = GetSQLTable
</script>

Answer 2

尝试将.when与ajax调用数组一起使用。像这样的东西（简化以删除不相关的位）：

function GetSQLTable() {
    //...
    var calls = [];
    for (var i = 0; i < res.length; i++) {
        //..
        calls.push($.ajax({
            type: "POST",
            //..
        }));
    }
    $.when(calls).then(function(d) {
        // all done!!!
    });

逐步加载网页：我在哪里放：$（“＃LoadingImage”）。隐藏（）;

2 个答案: