Javascript 如何在不刷新页面的情况下使用jquery和php动态更新分数

使用下面的代码，每当

score.php

中的分数（json）发生变化时，我想更新排行榜

我尝试用

setInterval

包装整个

$.getJSON

查询，但每次启动

setInterval

时，它都会复制列表项，而不是用新的score json对象更新列表项

到目前为止，当您刷新页面时，代码可以工作，但我希望它能够动态更新

有什么办法可以达到我想要的效果吗？短暂性脑缺血发作

index.php

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

注意：我修改了script.js以显示问题。问题是每次启动

setInterval

时，列表项都会重复，这不是我想要的

我真正想要的是，原始列表项只会更新，以反映score.php中的更改。每当玩家获得更高的分数时，它就会显示在排行榜上

---

更新：这已根据下面的@Peekayy和@user26409021答案解决。但我不知道哪一个更有效，所以我将把这个问题留几天，以便为这两个答案赢得更多选票，然后我将选择一个答案。谢谢大家；）

您真正需要的不是

.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);

$（'#result'）.html（'
'）；
setInterval（函数（）{
$.getJSON（'score.php'，函数（数据）{
$（“#结果”）.html（“
”）；//在此处重置。。
$。每个（数据、功能（i）{
$（“#result>ul”）.append（“
”+i+”：“+data[i]+”
”）；
});
});
},1000);

对于每个setInterval，您都会添加与JSON结果对应的新的

项。这将在不清除现有节点的情况下执行。这就是为什么它似乎是重复的项目

必须用$（'#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>');
        });
    });
});

---

我试过你的建议，但没用。我还编辑了上面的代码以显示真正的问题。

player2 : 20
player3 : 7
player1 : 5

$('#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);

$(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>');
        });
    });
});

$(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);
});