在AJAX加载页面无限滚动 [英] Infinite scrolling within ajax-loaded page

问题描述

我有一个页面（我们称之为1.PHP）加载2.PHP到使用jQuery阿贾克斯一个div盒。 2.PHP打印20条记录从我的数据库。 当我到了滚动时的股利盒的底部，我希望它加载下一个20条记录。 如Facebook，Twitter等，等做的。

I have a page(let's call it 1.php) that loads 2.php into a div-box using jQuery-ajax. 2.php prints 20 records from my database. When I reach the bottom of the div-box when scrolling, I want it to load the next 20 records. Like Facebook, Twitter, etc, etc does it.

现在，我已经得到了这种行为，但仅载入2.PHP在它自己的时候！ 但不允许在DIV-框。

Now, I've gotten this behaviour, but only when loading 2.php on it's own! But not within the div-box.

我怎么去呢？

在此先感谢！

推荐答案

文件1.PHP应该输出这样的：

File 1.php should output this:

<div id="content">
</div>

<script type="text/javascript">
  $(document).ready(function() {
    // when we scroll, check the position:
    $(window).scroll(function()
    {
      // if at bottom, add new content:
      if  ($(window).scrollTop() == $(document).height() - $(window).height())
      {
        $.get("2.php",function(data) {
          $("#content").append(data);
        },'html');
      }

    }); 

  });
</script>

如果你想发送的迭代次数，以2.PHP你可以记住它在一些隐藏的输入，并将其作为参数传递给$不用彷徨发送

（）。

If you want to send the iteration number to 2.php you could remember it in some hidden input and send it as argument to $.get().

希望它帮助。

这篇关于在AJAX加载页面无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！