Question

我使用以下代码使用ajax，jquery，php，json获取成员及其信息的列表。唯一的问题是当我使用.html时，它只显示第一条记录，它不显示所有记录。完全糊涂了。

<script type="text/javascript">
$( document ).delegate("#member_home", "pagecreate", function() {
    var refreshId = setInterval(function(){
        var friends= new Array();
        $.ajaxSetup({cache: false})
        $.ajax({
            url:'http://www.l.example.com/app/scrip/friends_lookup.php',
            data: "",
            dataType: 'json',
            success: function(data){
                $.each(data, function(key, val) {
                    var friend = val['friend'];
                    var phone = val['phone'];
                    var status = val['status'];
                    var email = val['email'];
                    var updated = val['updated'];  
                    $('#member_friends').append("<div class='member-box'>"+friend+"<span class='status-pic1'><img src='images/"+status+".png' width='40' height='40'/></span><span class='phone_box'><a href='tel:"+phone+"'><img src='images/icons/phone.png' width='40' height='40' /></a></span><span class='email-box'><a href='mailto:"+email+"'><img src='images/mail.png' width='40' height='40' /></a></span><div class='clear'></div><span class='update-status'><i>last update:&nbsp;"+updated+"</i></span>");

                });                                             
            }                                                 
        });
    }, 1500);
});

</script>

我尝试了这个，但它不起作用：

<script type="text/javascript">
$( document ).delegate("#member_home", "pagecreate", function() {
    var refreshId = setInterval(function() {                                            
        var friends= new Array();
        $.ajaxSetup({cache: false})
        $.ajax({
            url: 'http://www.l.example.com/pp/scripts/friends_lookup.php',
            data: "",
            dataType: 'json',
            success: function(data){
                var output = [];
                for (var i = 0, len = data.length; i < len; i++) {
                    output[output.length] = {
                        friend  : data[i].friend,
                        phone   : data[i].phone,
                        status  : data[i].status,
                        email   : data[i].email,
                        updated : data[i].updated
                    };                                                  

                    $('#member_friends').html("<div class='member-box'>"+friend+"<span class='status-pic1'><img src='images/"+status+".png' width='40' height='40'/></span><span class='phone_box'><a href='tel:"+phone+"'><img src='images/icons/phone.png' width='40' height='40' /></a></span><span class='email-box'><a href='mailto:"+email+"'><img src='images/mail.png' width='40' height='40' /></a></span><div class='clear'></div><span class='update-status'><i>last update:&nbsp;"+updated+"</i></span>");
                }
            }
        });                                        
    }, 1500);
});
</script>

Answer 1

您在$.each循环的每次迭代中都会覆盖值。在循环之前，创建一个数组来存储数据，然后在每次迭代时添加到数组中：

$.ajax({
    success : function (data) {
        var output = [];
        for (var i = 0, len = data.length; i < len; i++) {
            output[output.length] = {
                friend  : data[i].friend,
                phone   : data[i].phone,
                status  : data[i].status,
                email   : data[i].email,
                updated : data[i].updated
            };
        }
        //you now have an array of objects that each contain a set of information
    }
});

我使用的for循环非常快，这是一个JSPerf来显示使用$.each()的性能提升：http://jsperf.com/jquery-each-vs-for-loops/2

您可能也注意到我使用的是output[output.length] = ...而不是output.push(...)。前者在旧浏览器中表现得更快（后者在现代浏览器中表现得更快），我倾向于尝试帮助旧浏览器，因为他们确实需要帮助。

Answer 2

我猜你的问题是，当你在一个循环中使用.html（）时，对于每次迭代，它将替换在上一次迭代期间用.html（）添加的所有内容。从逻辑上讲，这将只留下最后一条记录，而不是第一条记录。

Answer 3

你必须在循环之后调用.html（），目前它将替换#member_friends的内容在每次循环迭代中，所以你总是会看到最后一项。

这应该是解决方法：

var output = [];
var html = []
for (var i = 0, len = data.length; i < len; i++) {
    output[output.length] = {
        friend  : data[i].friend,
        phone   : data[i].phone,
        status  : data[i].status,
        email   : data[i].email,
        updated : data[i].updated
    };                                                  

    html.push("<div class='member-box'>"+friend+"<span class='status-pic1'><img src='images/"+status+".png' width='40' height='40'/></span><span class='phone_box'><a href='tel:"+phone+"'><img src='images/icons/phone.png' width='40' height='40' /></a></span><span class='email-box'><a href='mailto:"+email+"'><img src='images/mail.png' width='40' height='40' /></a></span><div class='clear'></div><span class='update-status'><i>last update:&nbsp;"+updated+"</i></span>");
}//end of for
$('#member_friends').html(html.join(''));

如何使用.html显示多条记录

3 个答案: