好资源导航 » 文章资讯 » PHP+jQuery实现滚屏无刷新动态加载数据功能详解

PHP+jQuery实现滚屏无刷新动态加载数据功能详解

2024-02-24 10:33:04 55

本文实例讲述了PHP+jQuery实现滚屏无刷新动态加载数据功能。分享给大家供大家参考，具体如下：

index.php

mo4');//模拟了几个用户
?>




滚屏加载--无刷新动态加载数据技术的应用

#container{margin:10pxauto;width:660px;border:1pxsolid#999;}
.single_item{padding:20px;border-bottom:1pxdotted#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}

//需要引入jquery


提示：使用滚动或拉动滚动条向下看。

$(function(){ varwinH=$(window).height();//页面可视区域高度 vari=1;//设置当前页数 $(window).scroll(function(){ varpageH=$(document.body).height(); varscrollT=$(window).scrollTop();//滚动条top varaa=(pageH-winH-scrollT)/winH; if(aa<0.02){ $.getJSON("result.php",{page:i},function(json){ if(json){ varstr=""; $.each(json,function(index,array){ varstr=""; varstr=str+""+array['date']+""; varstr=str+""+array['author']+""; varstr=str+""+array['content']+""; $("#container").append(str); }); i++; }else{ $(".nodata").show().html("别滚动了，已经到底了。。。"); returnfalse; } }); } }); });

ajax_demo.sql

--phpMyAdminSQLDump
--version3.5.2.2
--http://www.phpmyadmin.net
--
--主机:localhost
--生成日期:2015年01月18日15:56
--服务器版本:5.1.46-community
--PHP版本:5.2.13
SETSQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SETtime_zone="+00:00";
/*!40101SET@OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT*/;
/*!40101SET@OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS*/;
/*!40101SET@OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION*/;
/*!40101SETNAMESutf8*/;
--
--数据库:`demo`
--
----------------------------------------------------------
--
--表的结构`say`
--
CREATETABLEIFNOTEXISTS`say`(
`id`int(11)NOTNULLAUTO_INCREMENT,
`userid`int(11)NOTNULLDEFAULT'0',
`content`varchar(200)NOTNULL,
`addtime`int(10)NOTNULL,
PRIMARYKEY(`id`)
)ENGINE=MyISAMDEFAULTCHARSET=utf8AUTO_INCREMENT=63;
--
--转存表中的数据`say`
--
INSERTINTO`say`(`id`,`userid`,`content`,`addtime`)VALUES
(1,0,'爱爱爱',1421332482),
(2,1,'爱爱爱',1421332482),
(3,0,'爱爱爱',1421332482),
(4,1,'爱爱爱',1421332482),
(5,0,'爱爱爱',1421332482),
(6,0,'爱爱爱',1421332482),
(7,0,'爱爱爱',1421332482),
(8,2,'爱爱爱',1421332482),
(9,0,'爱爱爱',1421332482),
(10,0,'爱爱爱',1421332482),
(11,0,'爱爱爱',1421332482),
(12,0,'爱爱爱',1421332482),
(13,0,'爱爱爱',1421332482),
(14,0,'爱爱爱',1421332482),
(15,0,'爱爱爱',1421332482),
(16,0,'爱爱爱',1421332482),
(17,0,'爱爱爱',1421332482),
(18,0,'爱爱爱',1421332482),
(19,0,'爱爱爱',1421332482),
(20,0,'爱爱爱',1421332482),
(21,0,'爱爱爱',1421332482),
(22,0,'爱爱爱',1421332482),
(23,0,'爱爱爱',1421332482),
(24,0,'爱爱爱',1421332482),
(25,0,'爱爱爱',1421332482),
(26,0,'2222',1421333156),
(27,0,'2222',1421333159),
(28,0,'2222',1421333161),
(29,0,'2222',1421333162),
(30,0,'2222',1421333164),
(31,0,'2222',1421333165),
(32,0,'2222',1421333167),
(33,0,'2222',1421333168),
(34,0,'2222',1421333169),
(35,0,'2222',1421333170),
(36,0,'2222',1421333172),
(37,0,'2222',1421333173),
(38,0,'2222',1421333175),
(39,0,'2222',1421333176),
(40,0,'2222',1421333177),
(41,0,'2222',1421333178),
(42,0,'2222',1421333179),
(43,0,'2222',1421333181),
(44,0,'2222',1421333182),
(45,0,'2222',1421333183),
(46,0,'2222',1421333184),
(47,0,'2222',1421333293),
(48,0,'2222',1421333295),
(49,0,'2222',1421333296),
(50,0,'2222',1421333297),
(51,0,'2222',1421333298),
(52,0,'2222',1421333299),
(53,0,'2222',1421333300),
(54,0,'2222',1421333302),
(55,0,'2222',1421333303),
(56,0,'2222',1421333304),
(57,0,'2222',1421333305),
(58,0,'2222',1421333306),
(59,0,'2222',1421333308),
(60,0,'2222',1421333309),
(61,0,'2222',1421333310),
(62,0,'2222',1421333311);
/*!40101SETCHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT*/;
/*!40101SETCHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS*/;
/*!40101SETCOLLATION_CONNECTION=@OLD_COLLATION_CONNECTION*/;

result.php 接收请求页面

$row['content'],
'author'=>$user[$row['userid']],
'date'=>date('m-dH:i',$row['addtime'])
);
}*/
if($query){
while($row=mysqli_fetch_array($query)){
$arr[]=array(
'content'=>$row['content'],
'author'=>$user[$row['userid']],
'date'=>date('m-dH:i',$row['addtime'])
);
}
}
if(!empty($arr)){
echojson_encode($arr);//转换为json数据输出
}
//echojson_encode($arr);//转换为json数据输出
?>

connect.php 数据库配置文件

更多关于PHP相关内容感兴趣的读者可查看本站专题：《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

返回顶部
514930285
czq8825@qq.com

PHP+jQuery实现滚屏无刷新动态加载数据功能详解

热门推荐

随机推荐