无刷新动态加载数据,滚动条加载
滚屏加载更多数据,适合评论等页面
本例的数据库很简单,一看就明了
![](https://i-blog.csdnimg.cn/blog_migrate/b4dbcaead5098eeb69ec1b11ecd63145.jpeg)
PHP Code
- <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文件
JavaScript Code
- <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 Code
- <?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数据输出
- ?>