Question

我从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>

这是get_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();
  }

?>

感谢任何提示/帮助。

Answer 1

这里有一些问题。首先，你没有正确引用身体标签 - 你应该使用：

$("body")...

你在脚本中完成了

而不是$（body）。

第二个问题是，内容可能无法填充可用空间 - 如果内容不够高，无法滚动，那么滚动事件将永远不会触发，因此即使修正了正文标记，该事件可能永远不会尝试开火。您可以轻松地在文档就绪事件中放置某种循环：

$(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请求 - 查询必须成功完成或触发错误才能使计数器减少回零再次，并且在发生这种情况之前不会再尝试其他查询。

无限页面滚动功能与Mysql无法正常工作

1 个答案: