如何从另一个 PHP 文件附加数据答案

【问题标题】：How to append data from another PHP file如何从另一个 PHP 文件附加数据
【发布时间】：2014-02-16 13:03:59
【问题描述】：

我正在使用 jQuery 瀑布作为响应式网格布局。

我使用的是砖石结构，并且有一个加载更多按钮功能，但我正在修改我所拥有的并试图了解代码的作用。

所以对于加载更多按钮，我有这个：

$(document).ready(function(){
    var pageIndex = 1;
    $('#loadmorebuilds-div').click(function() {
        $("#buildcontainer").append('<div class="blogresults"><br><br></div>');
    });
});

理论上，这可以正常工作。但是我有另一个页面，它从我的数据库中加载了所有额外的内容。

这是以前用过的：

$(document).ready(function(){
    var pageIndex = 1;
    $('#loadmorebuilds-div').click(function() {
        $('.countvar').detach();
        $('#buildcontainer').imagesLoaded( function(){
        $.ajax({
           url: 'includes/loadmorebuilds.php?type=' + type + '&pageIndex=' + pageIndex,
           success: function(html) {
              var el = $(html);
         
              $("#buildcontainer").append(el);
              $("#loadmorebuilds-div").stop().fadeOut();
              pageIndex++;
              
              var rowCount = $(".countvar").html();
              
              if (rowCount < 16) {
                $('#loadmorebuilds-div').remove(); 
                $('.countvar').detach();
              } else {
                $('.countvar').detach();
              }
              
           }
        
        });
        
    });
    
});
});

这也有效，并且确实加载了新数据，但似乎加载了数据并且不能正确地将其放入网格中。其中一个结果位于其他结果下方，但其他结果在左上角重叠并位于其他结果下方等。

我可以使用第一个示例手动添加尽可能多的 div，并且效果很好。

此外，当使用第二个示例时，项目似乎会刷新并仅适用于正在加载的新数据。

在我看来，这与此有关：

success: function(html) {
    var el = $(html);

有没有更好的方法从请求的页面中获取内容并将其简单地附加到 div 中。

被调用的页面只是在数据库上运行一个查询并在 foreach 语句中回显 div。所以 div 布局就是例如

<div class="blogresults"></div>

对此有什么想法吗？

【问题讨论】：

所以问题是这样的：“这也有效，并且确实加载了新数据，但似乎加载了数据并且无法正确地将其放入网格中。其中一个结果位于其他结果下方，但是其他的在左上角重叠并坐在其他人的下面等等。”？在这种情况下，您不能编辑“includes/loadmorebuilds.php”吗？页面，所以它返回的数据不同？

标签： javascript php jquery html append

【解决方案1】：

在 ajax 成功事件上你应该这样做：

    success: function(data) {
        $('blogresults').html(data);
}

【讨论】：

【解决方案2】：

搜索了瀑布文件夹中的示例，它似乎使用了“回流”功能，其工作原理相同（我猜）和砌体“重新加载”。

试过了

$("#buildcontainer").append(html).waterfall('reflow');

它有效:)

【讨论】：