首页 / 网页编程 / 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数据输出
？>