使用jQuery和PHP在div中显示循环中的JSON数据

时间:2017-03-17 06:44:26

标签: php jquery json

我正在使用jQuery和JSON从数据库中获取数据

$("#openNotification").on('click', function(e)
{
    ID = "a";
    $.ajax(
    {
        url: "notificationDetail",
        type: "POST",
        data:
        {
            designationID: ID
        },
        dataType: "JSON",
        success: function (jsonStr)
        {
            $(".processingNotification").hide();

            var jSonLength = jsonStr.length;

            for (var i=0; i<jSonLength; i++)
            {
                var userAvatar = jsonStr[0].userAvatar;

                var newrow = "<div class='subNotification'><img src='assets/img/avatar/"+userAvatar+"'/></div>";


            }


            $(".opened_page").html(newrow);
        }
    });
});

HTML

<div class="opened_page"></div>

当我点击#openNotification时,我可以看到来自PHP的jSon数据

enter image description here

但是当我想将数据显示到.opened_page时,它只显示1个数据。

2 个答案:

答案 0 :(得分:3)

您正在使用新值替换,代码应为

O(log k)

答案 1 :(得分:1)

你也可以在这里使用jQuery append()函数。

例如。

for(var i = 0; i < jSonLength; i++){
   var userAvatar = jsonStr[i].userAvatar;
   $(".opened_page").append("<div class='subNotification'><img src='assets/img/avatar/"+userAvatar+"'/></div>");
}

所以你的最终代码就像,

$("#openNotification").on('click', function(e){
    ID = "a";
    $.ajax({
        url: "notificationDetail",
        type: "POST",
        data: {
            designationID: ID
        },
        dataType: "JSON",
        success: function (jsonStr){
            $(".processingNotification").hide();
            var jSonLength = jsonStr.length;

            for(var i = 0; i < jSonLength; i++){
                var userAvatar = jsonStr[i].userAvatar;
                $(".opened_page").append("<div class='subNotification'><img src='assets/img/avatar/"+userAvatar+"'/></div>");
            }
        }
    });
});