我正在从 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();
}
?>
任何提示/帮助表示赞赏。
最佳答案
您遇到了一些问题。首先是您没有正确引用 body 标记 - 您应该使用:
$("body")...
而不是像您在脚本中所做的那样 $(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 请求 - 查询必须成功完成或触发错误，计数器才会递减回零再次，并且在发生之前不会尝试另一个查询。
关于php - Mysql 无限页面滚动功能不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42609696/