jquery - 使用 PHP、AJAX、JQUERY 和 JSON 的动态记分板

Question

基本上我已经创建了一个在线排行榜 here返回前 100 个用户分数

如果用户点击刷新并且排名发生变化，它将显示新的排名。我想做的是使用 AJAX、jQuery 和 JSON 在不刷新页面的情况下更新排名。

排行榜通过关联sql查询填充并存储在sql变量中，我已经设法以JSON格式获取输出here使用

    //Shows user details and the current top 100 ranks
while ($row = mysql_fetch_assoc($result)) {

    print json_encode ($row);
  }

到目前为止一切顺利，使用 [Tinysort][3] 中的这个动画排序示例

function sort() {
    var $Ul = $('ul#leaderboard');
    $Ul.css({position:'relative',height:$Ul.height(),display:'block'});
    var iLnH;
    var $Li = $('ul#leaderboard>li');
    $Li.each(function(i,el){
        var iY = $(el).position().top;
        $.data(el,'h',iY);
        if (i===1) iLnH = iY;
    });
    $Li.tsort('h1:eq(0)',{order:'desc'}).each(function(i,el){
        var $El = $(el);
        var iFr = $.data(el,'h');
        var iTo = i*iLnH;
        $El.css({position:'absolute',top:iFr}).animate({top:iTo},500);
    });
}

我相信我已经完成了大部分工作，但我陷入了下面的 poll() 函数

poll();

function poll() {

    $.ajax({
        url: 'http://test.bmx-tube.com/ajax.php', // needs to return a JSON array of items having the following properties: id, score, facebook_id, username
        dataType: 'json',
        success: function(o) {
            for(i=0;i<o.length;i++) {
                if ($('#row-'+o[i].player_id).length == 0) {
                    // this id doesn't exist, so add it to our list.
                    $("#leaderboard").append('<li><h1 style="display:inline" player_id="row-' + o[i].player_id + '">' + o[i].score + '</h1> <img style="height:50px" src="http://graph.facebook.com/' + o[i].facebook_id + '/picture"/> ' + o[i].name + '</li>');
                } else {
                    // this id does exist, so update 'score' count in the h1 tag in the list item.
                    $('#row-'+o[i].player_id).html(o[i].score);
                }
            }
            sort();
        },
    }); 

    // play it again, sam
    var t = setTimeout(poll,3000);
}

我尝试过更改周围的所有变量，但到目前为止还没有运气。

非常感谢任何帮助

Answer 1

首先，您的 JSON 字符串无效。您的服务器实际上并未返回对象数组。

您是否使用 echo json_encode($yourArray); 创建 JSON 服务器端？

以下是 JSON 字符串形式的正确对象数组的示例:

{"array":[
     {"object":"1","description":"this is an object"},
     {"object":"2","description":"this is an object"},
     {"object":"3","description":"this is an object"}
]}

注意:您可以使用 JSONLint 验证 JSON 字符串:http://jsonlint.com/

您还可以使用 firebug 或 chrome 的检查器工具来查看对象是否有效，并以更直观的方式查看服务器返回的 JSON 字符串。

一旦你有了一个有效的对象，你就可以使用 jQuery .each() 轻松而优雅地访问对象。

例如:

$.ajax({
        url: 'http://test.bmx-tube.com/ajax.php',
        type: "get", cache:false,
        dataType: 'json',
        success: function(ranks) 
        {
            $(ranks).each(function(index, rank)
            {
                if($('#row-'+rank.player_id).length == 0) 
                {
                    // this id doesn't exist, so add it to our list.
                    $("#leaderboard").append('<li><h1 style="display:inline" id="row-' + rank.player_id + '">'+rank.score+'</h1> <img style="height:50px" src="http://graph.facebook.com/'+rank.facebook_id + '/picture"/> ' + rank.name + '</li>');
                } 
                else 
                {
                    // this id does exist, so update 'score' count in the h1 tag in the list item.
                    $('#row-'+rank.player_id).html(rank.score);
                }
            });
            //now sort
            sort();
        },
        error: function()
        {
            alert("Ajax error: could not access URL");
        }
    });

其他一些注意事项

在将 GET 与 AJAX 结合使用时，最好禁用定期更改的数据缓存。这就是上面的 type: "get", cache:false, 所做的事情。

<小时/>

如果您需要任何进一步的帮助，请告诉我...这应该会为您指明正确的方向。

干杯，油酸

--- 编辑 1 ---

我现在明白你打算用 player_id="row-'+rank.player_id+'" 做什么。实际上应该是 id="row-'+rank.player_id+'"

我修改了上面的代码以反射(reflect)这一点。

jsFiddle

这是一个 JSFiddle，演示了您可以如何进行您想要做的事情。我现在通过删除排序函数来简化事情，只使用一个非常简单的排序。我还将生成的 HTML 分解为多个部分，以便您可以单独设置它们的样式并以更结构化的方式修改数据。 http://jsfiddle.net/DigitalBiscuits/fKcKF/6/

注意:由于 jsFiddle 的工作方式，我必须生成一个模拟数据集并修改 AJAX 函数来加载它。在您的网站上，您当然会从您自己的服务器加载 JSON。

<小时/>

如果这对您有帮助，请投票。如果它解决了您的问题，请将此答案标记为正确。

祝你好运!