Question

所以我试图以json格式从服务器获取数据。

使用此代码

for (var i = 0; i < hosts.length; i++) {
    var tempUrl = url + hosts[i];
    jQuery.ajax({
        type : "GET",
        dataType : "json",
        username : "user",
        password : "password",
        url : url,
        async : true,
        success : function (data) {
            //var obj = data.data.host.status;
            //console.log(obj);
            jsonHosts.push(data.data);
            console.log("added data");
        }
    });
}

后跟此代码块

for (var i = 0; i < jsonHosts.length; i++) {
            console.log("dog");
            console.log(jsonHosts[i].host.status);
            document.getElementById('test').innerHTML += "<br>" + jsonHosts[i].host.status;
            document.getElementById('test').innerHTML += '<br>Some new content!';
        }
        console.log("done");

问题是，我的控制台会显示“已完成”，然后“添加数据”，我的网页将显示为空白。

我已经尝试将第一部分放在一个函数中并尝试让我的代码等待函数完成执行但无济于事。

无论如何，我可以按顺序执行此代码/让第二个块在第一个块上等待

Answer 1

将以下部分代码移至成功回调函数

success : function (data) {
    //var obj = data.data.host.status;
    //console.log(obj);
    jsonHosts.push(data.data);
    for (var i = 0; i < jsonHosts.length; i++) {
        console.log("dog");
        console.log(jsonHosts[i].host.status);
        document.getElementById('test').innerHTML += "<br>" +     jsonHosts[i].host.status;
        document.getElementById('test').innerHTML += '<br>Some new content!';
    }
    console.log("done");
}

Answer 2

ajax是异步的，因此成功函数在循环之后运行。试试这个：

   for (var i = 0; i < hosts.length; i++) {
        var tempUrl = url + hosts[i];
        jQuery.ajax({
            type : "GET",
            dataType : "json",
            username : "user",
            password : "password",
            url : url,
            async : true,
            success : function (data) {
                //var obj = data.data.host.status;
                //console.log(obj);

            console.log("done");
                jsonHosts.push(data.data);
                console.log("added data");
                DataCame(jsonHosts);
            }
        });
    }

function DataCame(jsonHosts){
for (var i = 0; i < jsonHosts.length; i++) {
                    console.log("dog");
                    console.log(jsonHosts[i].host.status);
                    document.getElementById('test').innerHTML += "<br>" +  jsonHosts[i].host.status;
                    document.getElementById('test').innerHTML += '<br>Some new content!';
                }
}

javascript代码没有按顺序执行

2 个答案: