2

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

4

3 回答 3

1

第 1 步] 借助一点点 jquery 作为....

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

step 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'];
          }
    }
于 2012-09-14T07:54:29.697 回答
0

使用 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.
于 2012-09-14T07:43:06.757 回答
0

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

  • 通过执行这样的查询来获取默认数量的元素（比如 50）SELECT * FROM yourTable WHERE ..... ORDER BY .... LIMIT 50
  • 使用 jQuery 检测滚动事件
  • 检测到滚动事件后进行 AJAX 调用
  • 进行一个新查询，再次获取 50 个元素，但这次要考虑到您已经滚动（因此，添加增量或偏移量）
  • 渲染从 AJAX 返回的元素
于 2012-09-14T07:45:18.090 回答