使用PHP、AJAX、JQUERY和；JSON
基本上，我已经创建了一个在线LeaderBoard，返回前100名用户分数 如果用户点击“刷新”并且排名发生变化，它将显示新的位置。我想做的是使用AJAX、jQuery和JSON在不刷新页面的情况下更新排名 排行榜是通过一个关联sql查询填充的，并存储在一个sql变量中，我已经设法获得了JSON格式的输出，使用 使用[Tinysort][3]中的这个动画排序示例，到目前为止效果不错使用PHP、AJAX、JQUERY和；JSON,jquery,ajax,json,Jquery,Ajax,Json,基本上，我已经创建了一个在线LeaderBoard，返回前100名用户分数 如果用户点击“刷新”并且排名发生变化，它将显示新的位置。我想做的是使用AJAX、jQuery和JSON在不刷新页面的情况下更新排名 排行榜是通过一个关联sql查询填充的，并存储在一个sql变量中，我已经设法获得了JSON格式的输出，使用 使用[Tinysort][3]中的这个动画排序示例，到目前为止效果不错 function sort() { var $Ul = $('ul#leaderboard');
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();
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);
}
poll（）；
函数poll（）{
$.ajax({
网址：'http://test.bmx-tube.com/ajax.php“，//需要返回具有以下属性的项目的JSON数组：id、score、facebook\u id、username
数据类型：“json”，
成功：功能（o）{
首先，您的JSON字符串无效。您的服务器实际上没有返回对象数组
您是否使用echo json_encode（$yourray）；
创建json服务器端
以下是作为JSON字符串的适当对象数组的示例：
NB:您可以使用JSONLint验证JSON字符串：
您还可以使用firebug或chrome的inspector工具查看对象是否有效，并以更直观的方式查看服务器返回的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");
}
});
$.ajax({
网址：'http://test.bmx-tube.com/ajax.php',
类型：“获取”，缓存：false，
数据类型：“json”，
成功：职能（职级）
{
$（等级）。每个（功能）（索引、等级）
{
如果（$（'#行-'+rank.player_id）.length==0）
{
//此id不存在，请将其添加到列表中。
$（“#排行榜”）.append（“”+rank.score+“+rank.name+” ）；
}
其他的
{
//此id确实存在，因此更新列表项中h1标记中的“分数”计数。
$（“#行-”+rank.player_id）.html（rank.score）；
}
});
//现在分类
排序（）；
},
错误：函数（）
{
警报（“Ajax错误：无法访问URL”）；
}
});
还有一些需要注意的事情
在使用带有AJAX的GET时，最好禁用定期更改的数据缓存。
这就是上面的类型：“get”、cache:false、
所做的
如果您需要任何进一步的帮助，请告诉我……这应该会为您指明正确的方向
干杯，
奥辛
---编辑1---
我现在意识到你打算用player_id=“row-”+rank.player_id+”
做什么了。
实际上应该是id=“行-”+rank.player\u id+”
我修改了上面的代码以反映这一点
JSFIDLE
下面是一个JSFiddle，演示了您可能如何执行您正在尝试的操作。
现在，我已经简化了排序函数，只是使用了一个非常简单的排序。
我还将生成的HTML分解为多个部分，这样您就可以单独设置它们的样式，并以更结构化的方式修改数据。
NB:由于JSFIDLE的工作方式，我不得不生成一个模拟数据集并修改AJAX函数来加载它。在您的网站上，您当然会从自己的服务器加载JSON
如果这对您有帮助，请向上投票。如果它解决了您的问题，请将此答案标记为正确
祝你好运！谢谢你的回复。我已经重新格式化了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为您提供的帮助非常感谢我尝试过使用您的建议，并做了一些修改，现在它似乎完成了我想要的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>
等等，有什么想法吗
再次感谢您好，看起来您是新来的。欢迎！如果您在我的答案中添加评论或修改您的问题以提供更新，而不是发布您自己的问题的答案，这会让人有点困惑，试图帮助您的人不会收到您的更新通知。您好，是的，我是新来的，如果我这样做了，非常抱歉有什么问题吗？我已经试过你的新解决方案了="行-'但这只是获取最后一个条目分数并将其添加到输出中的leaders行。我已经尝试了所有我能想到的方法来重新排列输出，甚至更改了Tinysort函数，但仍然没有成功。我相信这应该是相当容易的，但它现在已经击败了我。应该发生的是，如果最高分数nge则应重新安排输出，以反映这一点，如果分数don@t更改然后什么也不应该发生。无论如何，谢谢你的帮助。你的代码在我看来总体上还可以…但我不完全确定你的排序部分。我还没有机会完全检查代码。最好先让事情简单一些。请参阅我编辑过的答案。这是一个JSFIDLE，希望能帮助您。很抱歉延迟了响应。我已经看过JSFIDLE，这似乎或多或少是我想要做的，我也在考虑做一些自动增量测试，但您的解决方案比我能做的任何事情都要优雅。这足以让我继续下去如果我发现了或者需要任何进一步的帮助，我会发布
// 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);
<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>
1
2
3
4
1
2
3
4