1

次の関数を使用して、JSON ファイルからリンクのリストを作成し、それらをスパン要素に入れています (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 をコンテンツで更新しようとします。したがって、コンテンツは挿入されません。

アラートを使用すると、サーバーが応答するのに十分な時間実行を停止するため、アラートを追加すると機能します。

これを行う正しい方法は、代わりにコンテンツの更新を success-callback に移動することです。これは、サーバーが応答した後に常に実行されます。

$.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

これを修正しているのはアラートではありません。アラートは基本的に、AJAX 要求が完了するのに十分な時間 UI をブロックしています。

$.getJSON非同期メソッドです。これは、関数呼び出しの結果が常にすぐに利用できるとは限らないことを意味します。リスト要素 HTML を$.getJSONコールバック内に設定するコードを移動する必要があります。

$.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 に答える