gpt4 book ai didi

php - jscroll 结束时加载数据

转载 作者:行者123 更新时间:2023-12-01 06:48:59 25 4
gpt4 key购买 nike

我有一些需要无限滚动的 UI 元素。所以我正在使用jscroll 。我想在 div 结束时获取新数据。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src=js/jquery.jscroll.js></script>
<script>

$('.scrollt').jscroll(function(){
$(".scrollt").load("/handle.php?lastdis=90");});

</script>
</head>
<body>


<?php
include_once('conn.php');

$start=0;
$query="Select * from data where id > ". $start ." Limit 90;";
$res=mysqli_query($con,$query);

echo '<div class="scrollt">';
while ($row = mysqli_fetch_array($res, MYSQL_NUM)) {
echo "<p> ".$row[0]." &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;". $row[1]."<p><p><p>";
}

echo "</div>"

?>

</body>
</html>

所以基本上我显示了一个包含 90 条记录的页面,并希望在 load() 函数中获取 91 以上的记录。但这不起作用。

handle.php代码

<?php
include_once('conn.php');
$goahead=$_GET['lastdis'];

$query="Select * from data where id > ". $goahead ." Limit 20;";
$res=mysqli_query($con,$query);
while ($row = mysqli_fetch_array($res, MYSQL_NUM)) {
echo "<p> ".$row[0]." &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;". $row[1]."<p><p><p>";
}

只有两个小时的 jquery 体验。请耐心等待。

最佳答案

使用.scroll() 窗口上的事件,如下所示:

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});

You can test it here ,这需要窗口的顶部滚动,因此向下滚动了多少,添加了可见窗口的高度,并检查它是否等于整体内容(文档)的高度。如果您想检查用户是否接近底部,则看起来像这样:

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("near bottom!");
}
});

You can test that version here ,只需将 100 调整为您想要触发的底部的任何像素。

现在,不再在底部提醒用户使用 ajax获取您想要附加在底部的数据。

  $.ajax({
url: "handle.php",
type: "post",
data: values,
success: function(data){
$("#result").append(data);
},
error:function(){
alert("failure");
$("#result").append('Error Occurred while fetching data.');
}
});

关于php - jscroll 结束时加载数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18021620/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com