javascript - 将 ajax 调用返回的数据添加到 UL，然后更新 jQuery 流沙

Question

我正在构建用户列表并尝试使用 jQuery quicksand根据 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 项目。

Answer 1

您的 JSON 不正确。键 d 的值实际上是一个字符串，而不是一个对象，这就是您感觉 JSON Formatter 不起作用的原因。它实际上可以工作，但将其视为字符串而不是对象。

您必须拆开引号才能将其视为对象，或使用 $.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); }
});

fiddle - http://jsfiddle.net/rttAZ/