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


Posted in PHP onOctober 16, 2013

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

本例的数据库很简单,一看就明了
无刷新动态加载数据 滚动条加载适合评论等页面 

<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数据输出 
?>
PHP 相关文章推荐
PHP安全配置
Dec 06 PHP
一个PHP数组应该有多大的分析
Jul 30 PHP
解析php时间戳与日期的转换
Jun 06 PHP
php判断ip黑名单程序代码实例
Feb 24 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
May 29 PHP
PHP不用递归遍历目录下所有文件的代码
Jul 04 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
Sep 29 PHP
php版微信js-sdk支付接口类用法示例
Oct 12 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
Nov 03 PHP
利用 fsockopen() 函数开放端口扫描器的实例
Aug 19 PHP
PHP微信支付结果通知与回调策略分析
Jan 10 PHP
PHPstorm激活码2020年5月13日亲测有效
Sep 17 PHP
PHP字符串长度计算 - strlen()函数使用介绍
Oct 15 #PHP
php后台如何避免用户直接进入方法实例
Oct 15 #PHP
php下拉选项的批量操作的实现代码
Oct 14 #PHP
php登陆页的密码处理方式分享
Oct 14 #PHP
PHP设置图片文件上传大小的具体实现方法
Oct 11 #PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
Oct 10 #PHP
php检测网页是否被百度收录的函数代码
Oct 09 #PHP
You might like
php之readdir函数用法实例
2014/11/13 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
理解javascript异步编程
2016/01/27 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
深入探究node之Transform
2017/07/20 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
python如何实现内容写在图片上
2018/03/23 Python
python字符串与url编码的转换实例
2018/05/10 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
一组SQL面试题
2016/02/15 面试题
优秀团员个人的自我评价
2013/10/02 职场文书
音乐专业应届生教师求职信
2013/11/04 职场文书
领导检查欢迎词
2014/01/14 职场文书
邮政员工辞职信
2014/01/16 职场文书
个人简历中自我评价
2014/02/11 职场文书
合作经营协议书范本
2014/04/17 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
公积金具结保证书
2015/05/11 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android
css样式important规则的正确使用方式
2022/06/10 HTML / CSS