动态加载内容[重复]

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 并相应地检索数据，