滚屏加载--无刷新动态加载数据技术的应用
2015-07-16 10:24
731 查看
index.php
ajax_demo.sql
connect.php
<?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>滚屏加载--无刷新动态加载数据技术的应用</title> <style type="text/css"> #container{margin:10px auto;width: 660px; border: 1px solid #999;} .single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;} .author{position: absolute; left: 0px; font-weight:bold; color:#39f} .date{position: absolute; right: 0px; color:#999} .content{line-height:20px; word-break: break-all;} .element_head{width: 100%; position: relative; height: 20px;} .nodata{display:none; height:32px; line-height:32px; text-align:center; color:#999; font-size:14px} </style> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> //需要引入jquery </head> <body> <p class="one" style="margin:20px">提示:使用滚动或拉动滚动条向下看。</p> <div id="container"> <?php $query=mysqli_query($link, "select * from say order by id desc limit 0,15"); while ($row=mysqli_fetch_array($query, MYSQLI_ASSOC)) { ?> <div class="single_item"> <div class="element_head"> <div class="date"><?php echo date('m-d H:i',$row['addtime']);?></div> <div class="author"><?php echo $user[$row['userid']];?></div> </div> <div class="content"><?php echo $row['content'];?></div> </div> <?php } ?> </div> <div class="nodata"></div> </body> <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> </html>
ajax_demo.sql
<?php $host="localhost"; $db_user="root"; $db_pass="admin"; $db_name="ajax_demo"; $timezone="Asia/Shanghai"; $link=mysqli_connect($host,$db_user,$db_pass); mysqli_select_db($link, $db_name); mysqli_query($link, "SET names UTF8"); header("Content-Type: text/html; charset=utf-8"); ?>
connect.php
相关文章推荐
- 黑马程序员——JAVA基础------IO流(四)----字节字符转换流和缓冲流
- android 调用 Menu 两种方法
- VC枚举计算机串口资料(非注册表方法)
- JAVA学习第三天
- UNIX环境高级编程学习笔记(九)进程控制
- 已超过传入消息(65536)的最大消息大小配额
- asp.net 文件说明--Global.asax
- JS的parent、opener、self对象
- Windows下自由创建.htaccess文件的N种方法
- 形像颜色
- 字符串相似度计算----编辑距离
- ios awakeFromNib 和 initWithCoder:
- 什么是SPF?如何设置企业邮箱的SPF呢?(TXT记录)
- 【Struts2六】ui标签之form标签及数据回显
- PowerShell批量检查域密码弱口令
- PowerShell批量检查域密码弱口令
- 安卓开发获取当前手机应用信息的方法
- Android中使用4种方式实现按钮点击操作
- 视频工具箱和硬件加速
- android WebView