1

我正在使用以下函数从 JSON 文件创建链接列表并将它们放入 span 元素（jquery 已初始化）

$(document).ready(function() {

function createjson(category) {
        var content = "";
    i = 0;
    $.getJSON(category + ".txt", function(data){
        while(data[i] != null) {
            content = content + '<li class="liste"><a target="_blank" class="liste" href="' + data[i].url + '">' + data[i].name + '</a></li>';
            i++;
        }

    }); 
    document.getElementById("list_" + category).innerHTML = content;
}

createjson("cat1"); 

});

但是，如果我这样使用它，span 元素仍然是空的。只有当我更换

document.getElementById("list_" + category).innerHTML = content;

和

alert("test");
document.getElementById("list_" + category).innerHTML = content;

我得到了想要的输出。如何在不事先打印警报消息的情况下获取它？

4

4 回答 4

3

那是因为.getJSON()是一种异步方法。在服务器有时间响应请求之前，您的代码将尝试使用内容更新 DOM。因此不插入内容。

使用警报，您可以停止执行足够长的时间以使服务器响应，因此当您添加警报时它会起作用。

正确的做法是将您的内容更新移动到成功回调中，它始终在服务器响应后运行：

$.getJSON(category + ".txt", function(data){
    while(data[i] != null) {
        content = content + '<li class="liste"><a target="_blank" class="liste" href="' + data[i].url + '">' + data[i].name + '</a></li>';
        i++;
    }

    $("#list_" + category).html(content);
});

在上面的例子中，我也用document.getElementById("list_" + category).innerHTML = content;更短的 jQuery替换了你的。$("#list_" + category).html(content);

于 2012-11-09T10:16:37.993 回答
2

解决此问题的不是警报，警报基本上阻塞了 UI 足够长的时间以完成 AJAX 请求。

$.getJSON是一种异步方法。这意味着函数调用的结果并不总是立即可用，您需要移动在$.getJSON回调中设置列表元素 HTML 的代码：

$.getJSON(category + ".txt", function (data) {
    while(data[i] != null) { ... }
    document.getElementById("list_" + category).innerHTML = content;
});
于 2012-11-09T10:21:29.347 回答
1

将 html 附加到回调中，并在回调开始时重置 i。

$(document).ready(function() {

function createjson(category) {

    $.getJSON(category + ".txt", function(data)
    {
        var content = "";
        for(i=0; i<data.length; i++)
        {
            content = content + '<li class="liste"><a target="_blank" class="liste" href="' + data[i].url + '">' + data[i].name + '</a></li>';
        }
        document.getElementById("list_" + category).innerHTML = content;
    }); 

}

createjson("cat1"); 

});
于 2012-11-09T10:18:00.250 回答
0

使用它!==来比较不等于 NULL

 while(data[i] !== null) {
            content = content + '<li class="liste"><a target="_blank" class="liste" href="' + data[i].url + '">' + data[i].name + '</a></li>';
            i++;
        }
于 2012-11-09T10:18:39.043 回答