1

ユーザーのリストを作成しており、jQueryクイックサンドを使用して、ajax リクエストから返されたデータに基づいて UL を更新しようとしています。

データは次のように要求されます。

$.webMethod({
    url: 'http://staging.cmdapp.com/Services/Poll.asmx/LeaderboardGetTopScores',
    data: '{quizIDs:"'+quizIDs+'",numRecords:"'+numRecords+'"}',
    beforeSend: function () { },
    success: function (ret) {

        $.each(ret.leaderboard,function(i){
            // do something     
        });  

    },
    error: function (response) { console.log(response.responseText); }
});

返されるデータは JSON 文字列で、各ユーザーは「user_id」によって定義されます。JSON データ (未フォーマットで申し訳ありません):

{"d":"{\"leaderboard\":[{\"user_id\":\"8\",\"first_name\":\"Kevin\",\"last_name\":\"McFarlane\",\"points\":\"1\",\"time_taken\":1408,\"incorrect_attempts\":0},{\"user_id\":\"9\",\"first_name\":\"Hanna\",\"last_name\":\"Gilbert\",\"points\":\"1\",\"time_taken\":4762,\"incorrect_attempts\":0},{\"user_id\":\"1\",\"first_name\":\"Adrian\",\"last_name\":\"Bathurst\",\"points\":\"0\",\"time_taken\":1616,\"incorrect_attempts\":0}]}"}

私のhtmlページでは、流砂リストを次のように準備しています:

<ul class="quicksand">
    <li data-id="1">1</li>
    <li data-id="2">2</li>
    <li data-id="3">3</li>
    <li data-id="4">4</li>
</ul>

私は今、すべての ajax リクエストで UL を更新したいと考えています。返されたデータを保存し、個別の「ユーザー」を個別の LI アイテムに追加するにはどうすればよいですか?

私は次のことを試しましたが、うまくいきませんでした：

$.webMethod({
    url: 'http://staging.cmdapp.com/Services/Poll.asmx/LeaderboardGetTopScores',
    data: '{quizIDs:"'+quizIDs+'",numRecords:"'+numRecords+'"}',
    beforeSend: function () { },
    success: function (ret) {

        $.each(ret.leaderboard,function(i){
            pos = i + 1;
            str = '<li data-id="'+pos+'">' + ret.leaderboard[i].first_name + '&nbsp;' + ret.leaderboard[i].last_name + '</li>';       
        });

        $('.quicksand').quicksand( str, { adjustHeight: 'dynamic' } );     
        console.log(str);              
    },
    error: function (response) { console.log(response.responseText); }
});

各 LI アイテムの正しいデータがすべての ajax リクエストで DOM に取り込まれていることがわかりますが、すぐに消えて最初の LI アイテムだけが表示されることに注意してください。

4

1 に答える 1

0

JSONが正しくありません。キーの値dは実際にはオブジェクトではなく文字列であり、それがJSONフォーマッターが機能していないと感じる理由です。実際には機能しますが、オブジェクトではなく文字列のように扱います。

引用符をアンラップしてオブジェクトのように扱うか、オブジェクト$.parseJSONに変換するために使用する必要があります。

$.webMethod({
    url: 'http://staging.cmdapp.com/Services/Poll.asmx/LeaderboardGetTopScores',
    data: '{quizIDs:"'+quizIDs+'",numRecords:"'+numRecords+'"}',
    beforeSend: function () { },
    success: function (ret) {

        ret = $.parseJSON(ret.d);

        $.each(ret.leaderboard,function(i){
            pos = i + 1;
            str = '<li data-id="'+pos+'">' + ret.leaderboard[i].first_name + '&nbsp;' + ret.leaderboard[i].last_name + '</li>';       
        });

        $('.quicksand').quicksand( str, { adjustHeight: 'dynamic' } );     
        console.log(str);              
    },
    error: function (response) { console.log(response.responseText); }
});

フィドル-http://jsfiddle.net/rttAZ/

于 2013-03-13T12:00:46.433 に答える