Question

我正在尝试在用户从我的数据库滚动时加载内容。我试图按顺序一次加载10个项目。目前我已经实现了我想做的一切，除了我每次都要加载前10个项目。我真的不知道如何跟踪最后装载的物品。如果我创建了一个变量，那么无论何时每次调用脚本都会重置它。

我需要更改什么才能加载下10个而不是前10个？

PHP：

<?php
    // database connection info
    $conn = mysql_connect('localhost','root','') or trigger_error("SQL", E_USER_ERROR);
    $db = mysql_select_db('test',$conn) or trigger_error("SQL", E_USER_ERROR);

    //offset
    $offset=0;
    // number of rows to show per page
    $rowsperpage = 10;

    // get the info from the db 
    $sql = "SELECT ID, confession, image FROM test LIMIT $offset, $rowsperpage";
    $result = mysql_query($sql, $conn) or trigger_error("SQL", E_USER_ERROR);

    // while there are rows to be fetched...
    while ($list = mysql_fetch_assoc($result)) {
        echo '<table border="0" width="600px">';
        echo "<tr>";
        echo "<td><p>" . '<img src="' . $list['image'] . '" hspace="10" border="1" style="float:left;">' . "</p>";
        echo "<p>" . "#" . $list['ID'] . ": " . $list['confession'] . "</p></td>";
        echo "</tr>";
        echo "</table>";
        echo "<br>";
        //next ten rows
        $offset+=10;
    }
?>

的javascript：

  //load content as page scrolls
  function yHandler() {

      var content = document.getElementById('content');
      var contentHeight = content.offsetHeight;
      var yOffset = window.pageYOffset;
      var y = yOffset + window.innerHeight;

      if (y >= contentHeight) {
          // Ajax call to get more dynamic data goes here
          content.innerHTML += '<div class="newData"></div>';
          document.onload = $.post('test5.php', function (data) {
              $('.newData').html(data);
          });
      }
  }
  window.onscroll = yHandler;

Answer 1

您需要设置一些计数器，例如：

<input type="hidden" value ='counter_value'>

当你发送请求时，你必须用计数器值发送它，并在php文件中依赖于计数器值从db中选择接下来的10个项目。使用java脚本后，用++增加计数器值。当你再次发送请求时，值将为+1，并在php中生成逻辑以选择下一个项目

例如，当您到达页面底部时，您想要下载下一个项目。

$(window).scroll(function() {

   if($(window).scrollTop() + $(window).height() == $(document).height()) {
      ///here you have to send ajax to php file to get items
var counter= $('#idOfInputwithCouner').attr('value');
  $.ajax({

    url: 'youPhpFile.php',
    data:  "counter=" + counter,
        type: 'POST',
        processData: false,
        contentType: false,
        success: function (data) {
            alert('data'); //here you will get data from php file
        $('#idOfInputwithCouner').attr('value',counter +1); //increase input value 
        }
     })
   }
});

Answer 2

你可以在这里使用分页逻辑，每次调用发送pageNumber并相应地检索数据，

动态加载内容

2 个答案: