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

その他の注意事項

AJAX で GET を使用する場合、定期的に変更されるデータのキャッシュを無効にすることをお勧めします。それが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

私はあなたが提案したものをいくつかの修正を加えて使用しましたが、今では以下のコードを使用して私が望むことの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 に答える
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);

家に帰ったら次のステップを試してみます。ただし、1 つのことはまだ私を困惑させています。「player_id の代わりに data-player_id」を使用する必要があるとおっしゃいましたが、それは Ajax スクリプトでのことですか?

Oisin をご利用いただきありがとうございます。

于 2012-12-14T15:39:21.573 に答える