Javascript 将ajax调用返回的数据添加到UL，然后更新jQuery quicksand

我正在构建一个用户列表，并尝试使用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\u id”定义。JSON数据（很抱歉未格式化）：

在我的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>

1
2
3
4

现在我想在每个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); }
});

$.webMethod({
网址：'http://staging.cmdapp.com/Services/Poll.asmx/LeaderboardGetTopScores',
数据：{quizIDs:“+quizIDs+”，numRecords:“+numRecords+”}，
beforeSend:function（）{}，
成功：功能（ret）{
各美元（排名榜，功能（i）{
pos=i+1；
str='“+ret.Leadboard[i]。名字+'+ret.Leadboard[i]。姓氏+”；
});
$（'.quicksand'）.quicksand（str，{adjustHeight:'dynamic'}）；
console.log（str）；
},
错误：函数（响应）{console.log（response.responseText）；}
});

---

可能值得注意的是，我可以看到每个ajax请求拉入DOM中的每个LI项中的正确数据，但它会立即消失，只显示第一个LI项。

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

$.webMethod({
网址：'http://staging.cmdapp.com/Services/Poll.asmx/LeaderboardGetTopScores',
数据：{quizIDs:“+quizIDs+”，numRecords:“+numRecords+”}，
beforeSend:function（）{}，
成功：功能（ret）{
ret=$.parseJSON（ret.d）；
各美元（排名榜，功能（i）{
pos=i+1；
str='“+ret.Leadboard[i]。名字+'+ret.Leadboard[i]。姓氏+”；
});
$（'.quicksand'）.quicksand（str，{adjustHeight:'dynamic'}）；
console.log（str）；
},
错误：函数（响应）{console.log（response.responseText）；}
});

---

Fiddle-

请将json blob发布到此处。JSON prettifier出于某种原因没有对其进行处理，它似乎返回了null'wait..uncaughtTypeError:cannotread属性'leadboard'。。这里是

$

=

jQuery

吗？试着摆弄一下。你知道如何使用调试器吗？萤火虫？因为它在我的JSFIDLE中工作，我想不出为什么它在你的页面上不工作。

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