如何使用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);