logo标签列表

使用PHP、AJAX、JQUERY和JSON实现动态记分板

jqueryajaxjson
3
基本上，我已经创建了一个在线排行榜（此处），它返回前100名用户的得分，并且如果用户点击刷新并且排名发生变化，则会显示新的位置。我想要做的是使用AJAX、jQuery和JSON，在不刷新页面的情况下更新排名。
排行榜是通过一个关联SQL查询填充并存储在SQL变量中的。我已经成功地以JSON格式获得了输出，如此处所示。
    //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);
}

我已经尝试更改所有变量，但是到目前为止都没有成功。

非常感谢任何帮助。

3个回答
3

首先，你的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,所做的。

如果您需要进一步的帮助，请告诉我...尽管这应该指引您朝着正确的方向。

祝好， Oisin

--- 编辑 1 ---

我现在意识到您想要使用player_id="row-'+rank.player_id+'"做什么了。 那实际上应该是id="row-'+rank.player_id+'"

我已修改上面的代码以反映这一点。

jsFIddle

这里有一个JSFiddle演示了您可能会如何处理您正在尝试的内容。 我通过剪切你的排序函数并只使用了一个非常简单的排序来简化了事情。 我还将生成的HTML分成了几个部分，这样您就可以单独地为它们设置样式并以更有结构的方式修改数据。 http://jsfiddle.net/DigitalBiscuits/fKcKF/6/

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

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

祝好运！

0

感谢回复。我已重新格式化我的JSON输出，并且它通过了JSONLint的验证，如果您点击上面的链接，您可以看到现在格式化后的JSON。如果有其他人正在寻找类似的东西，我是这样做的：

// Perform Query
$result = mysql_query($sql);

$json = array();

while($row = mysql_fetch_assoc($result)) {
    $json['rank'] = ($row['rank_number']);
    $json['player id'] = ($row['player_id']);
    $json['facebook id'] = ($row['facebook_id']);
    $json['name'] = ($row['name']);
    $json['score'] = ($row['score']);
    $data[] = $json;
}

echo json_encode($data);

我回家后会尝试下一步。有一件事仍然困扰着我，您提到我应该在Ajax脚本中使用"data-player_id"而不是"player_id"，您是指这个吗？

再次感谢您的帮助，Oisin，非常感激。

对于那个 data-player_id，我指的是你在回调函数中将 player_id 存储为 DOM 元素上的自定义属性。但这真的取决于你打算如何使用这些数据以及是否担心你的标记的有效性。 - OACDesigns
好的，我现在明白你的意图了。我会相应地修改我的答案。这也应该有助于解决您的问题，即排名只是添加到输出中的问题。 - OACDesigns
0

我按照你的建议尝试了一下，并进行了一些修改，现在似乎使用下面的代码已经实现了我想要的98%功能：

<body>

<h1>This is just to test if it is connecting!</h1>
<ul id="leaderboard"></ul>

<script type="text/javascript">
jQuery(document).ready(function($) {

poll();

function poll() {

    $.ajax({
    url: '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"    data-player_id="row-' + rank.player_id + '">' + rank.rank +''+ rank.score +'</h1> <img  class="image" src="https://graph.facebook.com/' + rank.name + '/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");
    }
}); 

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

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);
    });
}
});
</script>
</body>

这只是使用HTML文件进行测试调用，您可以在此处看到输出。现在唯一的问题是（除了它很丑陋），它并没有轮询和重新排列用户的排名，而是像这样添加到输出中

1
2
3
4
1
2
3
4

等等，你有什么想法吗？

再次感谢。

嗨， 看起来你是新来的。欢迎！ 最好的做法是在我的答案下添加评论或修改你的问题以提供更新，而不是发布自己的答案。否则可能会有点混乱，帮助你的人也无法收到你的更新通知。 - OACDesigns
嗨，是的我在这里是新手，如果我做错了什么对不起。我尝试了你们的新解决方案'id="row-'，但这只是将最后一个条目的分数添加到输出中的领导者行。我尝试了我能想到的重新排列输出的每一种方式，甚至修改了Tinysort函数，但还是没有成功。我确定这应该相当容易，但现在它让我束手无策。所有应该发生的是，如果最高分数改变，则输出应该被重新排列以反映这一点，如果分数不变，则不应发生任何事情。无论如何，感谢您的帮助。 - user1903887
你的代码总体上看起来还不错。但是我对你的排序部分并不完全确定。我还没有完全审查代码的机会。最好先保持简单。 请查看我的编辑答案。这里有一个 jsFiddle，希望能帮到你。 http://jsfiddle.net/DigitalBiscuits/fKcKF/6/ - OACDesigns
抱歉回复晚了。我已经查看了jsFiddle，那似乎就是我想做的，我还考虑过进行一些自动递增的测试，但你的解决方案比我能做的任何事情都更优雅。这足以让我继续前进，如果我弄清楚了或需要进一步帮助，我会发布的。非常感谢您花时间帮助我，我非常感激您的努力。 - user1903887
很高兴我能够帮到你！如果你需要更多的帮助，随时提出吧。 - OACDesigns
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接