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);
}

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

非常感谢任何帮助

4

3 回答 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,上面正在做的事情。

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

干杯，奥辛

--- 编辑 1 ---

我现在意识到你打算用player_id="row-'+rank.player_id+'". 这实际上应该是id="row-'+rank.player_id+'"

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

jsFiddle

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

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

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

祝你好运！

于 2012-12-14T13:54:38.350 回答
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);

我回家后会尝试下一步。不过，有一件事仍然让我感到困惑——你提到我应该使用“data-player_id 而不是 player_id”，你的意思是在 Ajax 脚本中吗？

再次感谢 Oisin 的帮助，非常感谢

于 2012-12-14T15:39:21.573 回答
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

等等。有任何想法吗？

再次感谢

于 2012-12-14T19:13:55.410 回答