无限滚动jquery ajax
无限滚动jquery ajax
提问于 2013-07-24 16:58:26
我使用jquery，ajax和php来实现从数据库中无限滚动图像
当我到达页面的末尾，并在数据库中实际存在内容时显示消息"No More Content“时，代码只工作一次
这是我的代码
index.php
<html >
<?php include($_SERVER["DOCUMENT_ROOT"].'/db.php');
$query = "SELECT * FROM photo ORDER by PhotoNo DESC limit 12";
$result = mysql_query($query) or die('Query failed: ' . mysql_error());
$actual_row_count =mysql_num_rows($result);
?>
<head>
<title>Infinite Scroll</title>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
var page = 1;
$(window).scroll(function () {
$('#more').hide();
$('#no-more').hide();
if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
$('#more').css("top","400");
$('#more').show();
}
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('#more').hide();
$('#no-more').hide();
page++;
var data = {
page_num: page
};
var actual_count = "<?php echo $actual_row_count; ?>";
if((page-1)* 12 > actual_count){
$('#no-more').css("top","400");
$('#no-more').show();
}else{
$.ajax({
type: "POST",
url: "data.php",
data:data,
success: function(res) {
$("#result").append(res);
console.log(res);
}
});
}
}
});
</script>
</head>
<body>
<div id='more' >Loading More Content</div>
<div id='no-more' >No More Content</div>
<div id='result'>
<?php
while ($row = mysql_fetch_array($result)) {
$rest_logo=$row['PhotoName'];
$image="../images/rest/".$rest_logo;
echo '<div><img src='.$image.' /></div>';
}
?>
</div>
</body>
</html> data.php
<?php
$requested_page = $_POST['page_num'];
$set_limit = (($requested_page - 1) * 12) . ",12";
include($_SERVER["DOCUMENT_ROOT"].'/db.php');
$result = mysql_query("SELECT * FROM photo ORDER by PhotoNo DESC limit $set_limit");
$html = '';
while ($row = mysql_fetch_array($result)) {
$rest_logo=$row['PhotoName'];
$image="../images/rest/".$rest_logo;
$html .= '<div><img src='.$image.' /></div>';
}
echo $html;
exit;
?> 我真的需要帮助
回答 2
Stack Overflow用户
发布于 2013-07-24 17:05:26
快速查看一下，您会发现设置变量是错误的：
var actual_count = "<?php echo $actual_row_count; ?>";使用mysql_num_rows()计算第一组结果的返回值。但这仅限于12个。
您需要执行第二次mysql查询，以获得不带limi的所有图像，然后对它们进行计数，以获得数据库中的图像总数。
Stack Overflow用户
发布于 2013-07-24 17:19:22
在index.php中，您的查询只返回12行，这意味着$actual_row_count将只返回12行。相反，我会将$actual_row_count设置为"SELECT count (*) FROM photo“查询的结果。
我个人对这类事情的偏好是返回一个JSON响应，它只包含正在加载的n个响应，并将一个模板html存储在javascript中。按照你写的方式，它将返回上一次查询的所有照片，而不是你想要的最后12张照片。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17829430
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号