Php Mysql不工作时的无限页面滚动功能_Php_Jquery_Mysql_Ajax

Php Mysql不工作时的无限页面滚动功能

php jquery mysql ajax

Php Mysql不工作时的无限页面滚动功能,php,jquery,mysql,ajax,Php,Jquery,Mysql,Ajax,我正在从mysql获取数据，但页面滚动不起作用它只显示10个结果（1-10），如果向下滚动，则不会得到任何结果这是我的load.php文件 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="load_style.css"> <script type="text/javascript" src="jquery.js"></scri

我正在从mysql获取数据，但页面滚动不起作用

它只显示10个结果（1-10），如果向下滚动，则不会得到任何结果

这是我的load.php文件

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="load_style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 $(window).scroll(function ()
    {
      if($(body).height() <= $(window).scrollTop() + $(window).height())
      {
        loadmore();
      }
    });

    function loadmore()
    {
      var val = document.getElementById("row_no").value;
      $.ajax({
      type: 'post',
      url: 'get_resultts.php',
      data: {
       getresult:val
      },
      success: function (response) {
      var content = document.getElementById("all_rows");
      content.innerHTML = content.innerHTML+response;

      // We increase the value by 10 because we limit the results by 10
      document.getElementById("row_no").value = Number(val)+10;
      }
      });
    }
    </script>

    </head>

    <body>

      <h1>Load Results From Database On Page Scroll Using jQuery,Ajax And PHP</h1>
      <div id="all_rows">
        <?php

          $db = mysqli_connect("localhost", "root", "", "text");
          $sql="select text from text limit 0,10";
          $select = mysqli_query($db, $sql);
          while($row=mysqli_fetch_array($select))
          {
            echo "<p class='rows'>".$row['text']."</p>";
          }
        ?>
      </div>
      <input type="hidden" id="row_no" value="10">

    </body>
    </html>


$（窗口）。滚动（函数（）
{
如果（$（正文）.height（）

这是get\u resultts.php

<?php

  if(isset($_POST['getresult']))
  {
    $db = mysqli_connect("localhost", "root", "", "text");

    $no = $_POST['getresult'];
    $sql = "select text from text limit $no,10";
    $select = mysqli_query($db, $sql);
    while($row = mysqli_fetch_array($select))
    {
      echo "<p class='rows'>".$row['text']."</p>";
    }
    exit();
  }

?>

任何提示/帮助都将不胜感激。

您在这里遇到一些问题。首先，您没有正确引用body标签——您应该使用：

$("body")...

而不是像脚本中那样的$（body）

第二个问题是，内容可能无法填满可用空间——如果内容不够高，无法滚动，则滚动事件将永远不会触发，因此即使更正了body标记，事件也可能永远不会尝试触发。您可以轻松地在document ready事件中设置某种循环：

$(document).ready(function() { 
   ... (repeat similar check until content fills space) ...
}

最后一个问题是，为了响应滚动，您可以很容易地获得loadmore（）函数的多个触发器。这将导致您的页面触发多个具有相同行号的并行ajax请求，并且会有大量重复的请求按顺序出现

为了避免这种情况，您应该尝试在任何时候只运行一个这样的ajax查询。有多种方法可以做到这一点，但有一种方法是跟踪已打开的活动ajax查询的数量，并且只有在前面的查询已完成时才继续。例如：

var countAjax = 0;
function loadMore() {
    if (countAjax>0) return;
    $.ajax({
        beforeSend: function() {
            countAjax++;
        }, 
        ... (other settings) ...
        success: function(response) {
            countAjax--;
            ... (other success events) ...
        },
        error: function() {
            countAjax--;
            ... (other error events) ...
        }
    });
}

通过这样做，您可以确保页面一次只执行一个ajax请求，而不是并行执行多个ajax请求——查询必须成功完成或触发一个错误，计数器才能再次递减为零，并且在此之前不会尝试另一个查询。

提供更多调试数据，您是否有一些建议调试控制台出错？我没有收到任何类型的错误。但是页面滚动功能不起作用。例如，1 2 3 4..。10个结果显示在mysql中，但页面没有进一步加载..抱歉，我是初学者。您的内容变量中有什么？只需hiii HELLOPLESE之类的文本帮助我..这是我想要得到的演示，如图page scroll[link]（}如果您查看您提供的链接上的示例，您可以看到我提到的数据重复错误——页面生成同一ajax请求的多个副本，并收回多组重复数据。