0

以下に示すような「生き続けたい」JSONがあります。サーバーに継続的にクエリを実行し (継続的な間隔で "更新"、たとえば 30 秒)、それに応じてページに表示される内容を更新したいと考えています。JSON は次のように表示されます。

[
        {
            "Name": "Paul",
            "Date": "2012-10-26",
            "Score": 8
        },
        {
            "Name": "Janet",
            "Date": "2012-10-24",
            "Score": 18
        },
        {
            "Name": "Rick",
            "Date": "2012-10-26",
            "Score": 13
        }
]

これを表示する現在の（静的）バージョンは次のとおりです。

<body>
<script>
$.getJSON('myjson.json', function(data) {
for (var i in data) {
var Name = data[i].Name;
var Score = data[i].Score;
}           
var output = "<ul>";
for (var i in data) {
output += "<li>" + Name + "--" + Score;
}
output += "</ul>";
document.getElementById("placeholder").innerHTML=output;
});
</script>
<div id="placeholder"></div>
</body>

これはもちろんデータを表示しますが、サーバー上でjsonが変更されたときに（ページを更新せずに）「スコア」への変更をどのように「ストリーミング」しますか？

これはポーリングと呼ばれるものですか？

どんな助けでも大歓迎です。ありがとうございました

4

2 に答える 2

2

タイマーを使用するか、より具体的にはsetInterval()...

<script>
    function getData() {
        $.getJSON('myjson.json', function(data) {
            for (var i in data) {
                var Name = data[i].Name;
                var Score = data[i].Score;
            }           
            var output = "<ul>";
            for (var i in data) {
                output += "<li>" + Name + "--" + Score;
            }
            output += "</ul>";
            document.getElementById("placeholder").innerHTML=output;
        });
    }
    setInterval(getData, 30000);

    $(function() {
        getData();
    });
</script>

上記のスクリプトはgetData()、document.ready で関数を実行し、その後 30 秒ごとに実行#placeholderし、戻り値で要素を更新します。

于 2013-01-14T18:30:11.663 に答える
1

追加機能がなければ、すべてを関数にラップして、setIntervalまたはsetTimeoutで呼び出して、指定された間隔でコードを実行することができます。

基本的な例:

function getData(){
  ... your code ...

  setTimeout( getData, 3000 ); // Get data and refresh page every 3000 ms (3 seconds)
}

// 関数を呼び出してデータ収集を開始します

getData();
于 2013-01-14T18:31:14.313 に答える