javascript - 如何使用jquery和php动态更新分数而不刷新页面

Question

使用下面的代码，我想更新排行榜<div id='result'></div>每当分数 (json) 在 score.php 发生变化时.

我尝试包裹整个 $.getJSON查询 setInterval但每次 setInterval 都会复制列表项触发而不是仅仅使用新的分数 json 对象更新列表项。

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

有什么想法可以实现我想要的效果吗？ TIA

index.php

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

脚本.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);
});

分数.php

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

//输出

player2 : 20
player3 : 7
player1 : 5

注意:我修改了 script.js 以显示问题。问题是每次setInterval启动后，列表项重复，这不是我想要的。

我真正想要的是，每次玩家获得更高分数时，原始列表项都会更新以反射(reflect) Score.php 中的变化，它会显示在排行榜中。

更新:这已经按照下面的 @Peekayy 和 @user26409021 答案得到解决。但我不知道哪个更有效率，所以我会把这个问题留几天，以便为这两个答案获得更多选票，然后我会选择一个答案。谢谢大家;)

Answer 1

对于每个 setInterval，您附加新的 <li>与 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>');
        });
    });
});

另外，我想知道是否使用 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);
});