软件开发培训班 >> 编程开发 >> PHP


无刷新动态加载数据 滚动条加载适合评论等页面

　　本文标签：无刷新,动态加载,滚动条

滚屏加载更多数据,适合评论等页面

本例的数据库很简单，一看就明了
 
复制代码 代码如下:

<div id="container">

<?php
$query=mysql_query("select * from content order by id desc limit 0,10");
while ($row=mysql_fetch_array($query)) {
?>
<div class="single_item">
<div class="element_head">
<div class="date"><?php echo date(m-d H:i,strtotime($row[updatetime]));?></div>
<div class="author"><?php echo $row[id];?></div>
</div>
<div class="content"><?php echo $row[message];?></div>
</div>
<?php } ?>
</div>
<div class="nodata"></div>

js文件
复制代码 代码如下:

<script type="text/javascript">
$(function(){
var winH = $(window).height(); //页面可视区域高度
var i = 1;
$(window).scroll(function () {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); //滚动条top
var aa = (pageH-winH-scrollT)/winH;
if(aa<0.02){
$.getJSON("result.php",{page:i},function(json){
if(json){
var str = "";
$.each(json,function(index,array){
var str = "<div class=\"single_item\"><div class=\"element_head\">";
var str = str + "<div class=\"date\">"+array[date]+"</div>";
var str = str + "<div class=\"author\">"+array[author]+"</div>";
var str = str + "</div><div class=\"content\">"+array[content]+"</div></div>";
$("#container").append(str);
});
i++;
}else{
$(".nodata").show().html("别滚动了，已经到底了 。 。 。");
return false;
}
});
}
});
});
</script>

result.php
复制代码 代码如下:

<?php
include("conn.php");

$page = intval($_GET[page]); //获取请求的页数
$start = $page*5;
$query=mysql_query("select * from content order by id desc limit $start,5");
while ($row=mysql_fetch_array($query)) {
$arr[] = array(
content=>$row[message],
author=>$row[id],
date=>date(m-d H:i,strtotime($row[updatetime]))
);
}
echo json_encode($arr); //转换为json数据输出
?>