无刷新动态加载数据 滚动条加载适合评论等页面
2013-10-16 00:00
591 查看
滚屏加载更多数据,适合评论等页面
本例的数据库很简单,一看就明了
js文件
result.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数据输出 ?>
相关文章推荐
- 无刷新动态加载数据 滚动条加载适合评论等页面
- 无刷新动态加载数据 滚动条加载适合评论等页面
- 动态的把数据显示在table中,点击某一行的删除按钮实现该行的删除(通过ajax实现页面的无刷新加载)
- 【原创】ExtJs实现定时读取数据,动态加载数据,页面不刷新。Struts 2框架下JSON传值
- js/jq控制页面动态加载数据,滑动滚动条自动加载事件
- 页面滚动动态加载数据,页面下拉自动加载内容 ,滚动条滚动到最底端加载数据
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
- 无刷新动态加载数据,滚动条加载
- 无刷新动态加载数据,滚动条加载
- 动态的把数据显示在table中,点击某一行的删除按钮实现该行的删除(通过ajax实现页面的无刷新加载)
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
- 实现Web页面中级联菜单的设计/实现动态加载列表框/实现自动刷新页面/实现Web页面的局部动态更新/实现自动完成功能
- easyui关于解决tab添加的页面通过href加载数据内容的页面刷新后form表单重复提交的问题;
- ajax 数据库中随机读取5条数据动态在页面中刷新
- js控制页面动态加载数据
- jquery根据滚动条动态加载数据
- 页面滚动动态加载数据,页面下拉自动加载内容 jquery
- Dec 24 滚屏加载--无刷新动态加载数据技术的应用