动态加载内容[重复]

Posted 2023-02-24

【中文标题】动态加载内容[重复]

【英文标题】：Dynamically Loading Content [duplicate]

【发布时间】：2014-01-22 03:00:11

【问题描述】：

我正在尝试在用户从我的数据库滚动时加载内容。我正在尝试按顺序一次加载 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" >';
        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;

【问题讨论】：

为什么感觉你一直在重复自己的问题？ pagination loading on new page [on hold]（12 月 31 日）； Continuous page load content PHP（12 月 31 日）？

【参考方案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 
        
     )
   
);

【讨论】：

好吧，这是有道理的。我怎样才能从我的 php 中检索我的 js 中的那个变量？目前我正在尝试 $_GET['count'];它不工作。

已编辑。希望它会有所帮助

似乎没有用。我的警报只是说数据。

这是一个例子，你需要从 php 文件中发送这个数据（你的 intems）这里是一个例子***.com/questions/16873549/jquery-ajax-with-php。如您所见，它们将数据发送到 php 文件

1.您需要通过带有计数器值的 ajax 向您的 php 文件发送正确的响应。 2.你需要增加你的计数器值+1。 3.在php文件中创建逻辑以从db中选择项目并将它们发送回页面上显示。

【参考方案2】：

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