如何使用jQuery和PHP動態更新分數而無需刷新頁面

Question

使用下面的代碼，每當分數（json）在score.php更改時，我都希望更新排行榜<div id='result'></div> 。

我嘗試用setInterval包裝整個$.getJSON查詢，但每次setInterval觸發時，它都會復制列表項，而不是僅使用新的score json對象更新列表項。

到目前為止，代碼在刷新頁面時有效，但我希望它動態更新。

有什么想法可以達到我想要的效果嗎？ TIA

的index.php

<div id='result'></div>

的script.js

$(document).ready(function(){
    $('#result').html('<ul></ul>');

    setInterval(function(){

        $.getJSON('score.php', function(data){
            $.each(data, function(i){
                $('#result > ul').append('<li>'+i+' : '+data[i]+'</li>');
            });
        });

    },1000);
});

score.php

<?php
$result = [
"player1"=>5,
"player2"=>20,
"player3"=>7
];
arsort($result);
echo json_encode($result);

//輸出

player2 : 20
player3 : 7
player1 : 5

注意：我已經修改了script.js來顯示問題。 問題是每次setInterval啟動時，列表項都在重復，這不是我想要的。

我真正想要的是，每當球員獲得更高的得分時，原始列表項便會更新以反映score.php中的變化，它會顯示在排行榜中。

更新：根據下面的@Peekayy和@ user26409021答案，此問題已解決。 但我不知道哪個效率更高，因此我將把這個問題擱置幾天，以便獲得兩個答案的更多選票，然后再選擇一個答案。 多謝你們 ;）

Answer 1

對於每個setInterval，您都將添加與JSON結果相對應的新<li>項目。 這無需清除現有節點。 這就是為什么它似乎是重復項。

您必須使用$（'＃result> ul'）。empty（）;清除#result子級。 在添加新節點之前。

$(document).ready(function(){
    $('#result').append('<ul></ul>');
    $.getJSON('score.php', function(data){
        $('#result > ul').empty();
        $.each(data, function(i){
            $('#result > ul').addClass('result-list').append('<li>'+i+' : '+data[i]+'</li>');
        });
    });
});

另外，我想知道對於每個球員得分使用addClass('result-list')是否相關。 我只想使它清潔一點，就應該這樣做。

我建議的最終代碼：

$(document).ready(function(){
    var resultList = $('#result').append('<ul></ul>');
    resultList.addClass('result-list');
    setInterval(function(){
        $.getJSON('score.php', function(data){
            resultList.empty();
            $.each(data, function(i){
                resultList.append('<li>'+i+' : '+data[i]+'</li>');
            });
        });
    }, 30000);
});

Answer 2

您真正需要的不是.append而是.html ，它將從div中刪除上一個元素。這樣做，您將不會有重復的條目。

$('#result').html('<ul></ul>');

setInterval(function(){
    $.getJSON('score.php', function(data){
        $('#result').html('<ul></ul>');//reset here..
        $.each(data, function(i){
            $('#result > ul').append('<li>'+i+' : '+data[i]+'</li>');
        });
    });

},1000);