Question

使用以下代码，我想在<div id='result'></div>中得分（json）发生变化时更新排行榜score.php。

我尝试用$.getJSON包装整个setInterval查询，但每次setInterval触发时都会复制列表项，而不是仅使用新的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>项。这不清除现有节点。这就是为什么它似乎是重复项目。

您必须使用$（＆＃39; #result＆gt; ul＆＃39;）清除#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);

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

2 个答案: