环路jQuery的PHP JSON数据显示到div的

Question

我有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数据

但是，当我想显示的数据.opened_page它只显示1个数据。

对于我上面的代码的任何建议？

Answer 1

您正在使用新的值来替换，代码应该是

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

Answer 2

您还可以使用jQuery这里追加（）函数。

例如，

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>"); 
      } 
     } 
    }); 
});