gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 11:58:30 24 4
gpt4 key购买 nike

使用下面的代码,我想更新排行榜<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 答案得到解决。但我不知道哪个更有效率,所以我会把这个问题留几天,以便为这两个答案获得更多选票,然后我会选择一个答案。谢谢大家;)

最佳答案

对于每个 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);
});

关于javascript - 如何使用jquery和php动态更新分数而不刷新页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25501682/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com