无限页面滚动功能与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(); 
    } 

?>

任何提示/帮助表示赞赏。

来源

2017-03-05 Imr An

提供更多调试数据，在调试控制台中有一些错误吗？ – bxN5

我没有收到任何类型的错误。但页面滚动功能不起作用。例如1 2 3 4 ..，。 10结果显示从MySQL，但页面没有进一步加载..对不起，我是这个 –

什么是你的内容变量？ – bxN5

这里有几个问题。第一个是，你不是指身体标记正确的 - 你应该使用：

$("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请求的时间，而不是多个并行的 - 查询必须要么成功完成，或触发了一个错误计数器再次递减到零，并且在发生之前不会尝试另一个查询。

来源

2017-03-05 23:41:44

这里是我想要得到像这个页面滚动的演示[链接]（http://talkerscode.com/webtricks/demo/demo_load-results-from-database-on-page-scroll-using-jquery-ajax- and-php.php} –

如果你看看你提供的链接的例子，你可以看到我提到的数据重复错误 - 页面产生同一个Ajax请求的多个副本，并拉回几组重复数据 –

试图实现你的代码@Rob Wilkins –

无限页面滚动功能与Mysql不工作

回答

相关问题