无限页面滚动功能与Mysql不工作
我从mysql获取数据,但页面滚动不起作用。无限页面滚动功能与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")...
,而不是$(体)如你在你的脚本完成的。
第二个问题是有可能内容不会填满可用空间 - 如果内容不够高而无法滚动,那么您的滚动事件将永远不会触发,因此即使一旦正文标记被纠正,该事件可能永远不会尝试着火。你可以很容易地采取了一些类型的循环在文档准备事件:
$(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请求的时间,而不是多个并行的 - 查询必须要么成功完成,或触发了一个错误计数器再次递减到零,并且在发生之前不会尝试另一个查询。
这里是我想要得到像这个页面滚动的演示[链接](http://talkerscode.com/webtricks/demo/demo_load-results-from-database-on-page-scroll-using-jquery-ajax- and-php.php} –
如果你看看你提供的链接的例子,你可以看到我提到的数据重复错误 - 页面产生同一个Ajax请求的多个副本,并拉回几组重复数据 –
试图实现你的代码@Rob Wilkins –
提供更多调试数据,在调试控制台中有一些错误吗? – bxN5
我没有收到任何类型的错误。但页面滚动功能不起作用。例如1 2 3 4 ..,。 10结果显示从MySQL,但页面没有进一步加载..对不起,我是这个 –
什么是你的内容变量? – bxN5