Question

我有这个脚本正在运行，但它只从DB表中返回1个帖子。

我需要在页面上显示表格的所有帖子：

$(document).ready(function(){
(function update() {
$.ajax({
  url:"getposts",
  type: "get",  
  data: "{}",
  success: function(data){
    var res = data;
    $.each(res[0], function(index, value) {
        $('#prova').html($('<div class="col-xs-12 col-md-6 col-lg-4 item">\
          <div class="timeline-block">\
              <div class="panel panel-default">\
                <div class="panel-heading">\
                  <div class="media">\
                    <div class="media-left">\
                      <a href="">\
                        <img src="http://bookstar.me/uploads/users/paolo.jpg" width="50px" class="media-object">\
                          </a>\
                        </div>\
                    <div class="media-body">\
                      <a href="#" class="pull-right text-muted"><i class="icon-reply-all-fill fa fa-2x "></i></a>\
                         <a href="">Paolo</a>\
                      <span>1/08/2016</span>\
                 </div>\
                  </div>\
                </div>\
                <div class="panel-body">\
                  <p>'+ value.post +'</p>\
                </div>\
                <div class="view-all-comments">\
                  <a href="#">\
                    <i class="fa fa-comments-o"></i> View all</a>\
                  <span>10 comments</span>\
                </div>\
                <ul class="comments">\
                  <li class="media">\
                    <div class="media-left">\
                      <a href="">\
                        <img src="http://bookstar.me/backend/bookstar/images/people/50/guy-5.jpg" class="media-object"></a>\
                    </div>\
                    <div class="media-body">\
                      <div class="pull-right dropdown" data-show-hover="li">\
                        <a href="#" data-toggle="dropdown" class="toggle-button">\
                          <i class="fa fa-pencil"></i>\
                        </a>\
                        <ul class="dropdown-menu" role="menu">\
                          <li><a href="#">Edit</a></li>\
                          <li><a href="#">Delete</a></li>\
                        </ul>\
                      </div>\
                      <a href="" class="comment-author pull-left">Bill D.</a>\
                      <span>Hi Mary, Nice Party</span>\
                      <div class="comment-date">21st September</div>\
                    </div>\
                  </li>\
                  <li class="media">\
                    <div class="media-left">\
                      <a href="">\
                        <img src="http://bookstar.me/backend/bookstar/images/people/50/woman-5.jpg" class="media-object">\
                      </a>\
                    </div>\
                    <div class="media-body">\
                      <div class="pull-right dropdown" data-show-hover="li">\
                        <a href="#" data-toggle="dropdown" class="toggle-button">\
                          <i class="fa fa-pencil"></i>\
                        </a>\
                        <ul class="dropdown-menu" role="menu">\
                          <li><a href="#">Edit</a></li>\
                          <li><a href="#">Delete</a></li>\
                        </ul>\
                      </div>\
                      <a href="" class="comment-author pull-left">Mary</a>\
                      <span>Thanks Bill</span>\
                      <div class="comment-date">2 days</div>\
                    </div>\
                  </li>\
                  <li class="media">\
                    <div class="media-left">\
                      <a href="">\
                        <img src="http://bookstar.me/backend/bookstar/images/people/50/guy-5.jpg" class="media-object"></a>\
                    </div>\
                    <div class="media-body">\
                      <div class="pull-right dropdown" data-show-hover="li">\
                        <a href="#" data-toggle="dropdown" class="toggle-button">\
                          <i class="fa fa-pencil"></i>\
                        </a>\
                        <ul class="dropdown-menu" role="menu">\
                          <li><a href="#">Edit</a></li>\
                          <li><a href="#">Delete</a></li>\
                        </ul>\
                      </div>\
                      <a href="" class="comment-author pull-left">Bill D.</a>\
                      <span>What time did it finish?</span>\
                      <div class="comment-date">14 min</div>\
                    </div>\
                  </li>\
                  <li class="comment-form">\
                    <div class="input-group">\
                      <span class="input-group-btn">\
               <a href="" class="btn btn-default"><i class="fa fa-photo"></i></a>\
            </span>\
                      <input type="text" class="form-control" />\
                    </div>\
                  </li>\
                </ul>\
              </div>\
            </div>\
            </div>'));
    });
  }
}).then(function() {           // on completion, restart
   setTimeout(update, 1000);  // function refers to itself
});
})();

感谢任何帮助。

Answer 1

1.在res[0]函数内稍稍更改res到$.each。

2.将$('#prova').html()更改为$('#prova').append()

Answer 2

原因是因为您只有一个帖子，因为您将每个帖子放在同一个html元素中 #prova 。

这样，你将只有最后一个，因为jQuery方法 html（）替换所有代码。

您应该使用 append（）方法。

要检查，这只是在循环中调试，你会看到有更多帖子被处理。

而且，更多，建议，请避免把所有这些HTML代码，阅读代码很复杂。

你应该在html页面中放置html，并使用javascript来实现逻辑。

尝试使用某些模板引擎，例如handlebars。

<强>更新

您通过 setTimeout（）电话每秒通过 update（）功能更新内容。

如果你想刷新所有内容，而不是再次添加（这取决于你的ajax调用的细节），你应该在返回ajax调用时重置元素的html内容，就在循环之前

例如：

$.ajax({
success: function(data) {
   var $prova = $('#prova');
   $prova.html(''); // reset the current content.
   $.each(data, function(index, value) {
       $prova.append('[... your html code here ...]');
   });  
 }
});

在Ajax调用之后在Jquery中循环

2 个答案: