Question

我有一个数据库，它包含1000多条记录。我必须在前端php页面显示它，如果我显示它将需要更多时间加载所以如果用户滚动信息应该在滚动后获取。就像Facebook和Pinterest一样。如何实现这个...... 我的DB： - mysql 服务器： - wamp

Answer 1

使用此链接。

http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html

它有完整的代码教程。

Answer 2

第1步]请一点点jquery作为......

var countScroll= 0;
$(window).scroll(function()
{
      if  ($(window).scrollTop() == $(document).height() - $(window).height())
      {
         loadData();
      }
      countScroll++;
});

步骤2]借助ajax调用loadData（）函数

function loadData()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {               
        var res = xmlhttp.responseText;
        document.getElementById("respDiv").innerHTML=res;           
            }
    }
    xmlhttp.open("GET","loadPageData.php?loadLimit="+countScroll,true);
        xmlhttp.send();
   }

第3步]你的php页面，即loadPageData.php是......

    $loadLimit= $_GET['loadLimit'];
    $result = mysql_query("SELECT * FROM tableName limit $loadLimit");
    if(mysql_num_rows($result)>0)
    {
        while($row = mysql_fetch_array($result))
        {
        echo $yourVariable= $row['fieldName'];
          }
    }

Answer 3

使用jQuery（或您喜欢的库）来检测用户何时到达页面末尾，然后只是向服务器触发AJAX请求以获得下一个N结果。

例如：

JavaScript部分：

var n = 0;

$(document).ready(function() {
    $(window).scroll(function() {
        if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
            $.ajax({
              url: "my_page.php",
                              data: {'n' : n},
              context: document.body
            }).done(function(data) { 
              n += 1;
              console.log(data); // <--- do stuff with received data here
            });
        }
    });
});

PHP部分：

$n = $_POST['n'];
$n = 10 * $n;
$sql = "SELECT * FROM mytable LIMIT $n, 10";  // get 10 new entries each request.

Answer 4

您的问题是通用的，难以用代码片段回答这可能是伪语言的解决方案

通过执行此SELECT * FROM yourTable WHERE ..... ORDER BY .... LIMIT 50
使用jQuery检测滚动事件
检测到滚动事件后进行AJAX调用
创建一个新查询，再次获取50个元素，但这次考虑到您已滚动（因此，添加增量或偏移量）
渲染从AJAX返回的元素

如何在滚动时从mysql数据库中获取数据

4 个答案: