jQuery+PHP完成阅读更多内容ITeye - AG环亚娱乐

jQuery+PHP完成阅读更多内容ITeye

2019-01-12 19:00:53 | 作者: 忆之 | 标签: 更多,完成,记载 | 浏览: 216

咱们在一些微博网站上能够碰到这样的运用,微博内容列表没有运用分页条,而是一次加载必定数量的记载显现在列表页,当用户阅读到列表页底部时,能够经过单击“检查更多”来加载更多记载。本文我将结合jQuery和PHP给我们叙述怎样完成这种运用。

检查演示 下载源码

基 本原理:页面载入时,jQuery向后台恳求数据,PHP经过查询数据库将最新的几条记载显现在列表页,在列表页的底部有 个“更多”链接,经过触发该链接,向服务端发送Ajax恳求,后台PHP程序得到恳求参数,并作出相应,获取数据库相应的记载并以JSON的方式回来给前 台页面,前台页面jQuery解析JSON数据,并将数据追加到列表页。其实就是Ajax分页作用。

首先要引进jquery库和jquery.more.js插件,jquery.more.js现已将许多功用都封装好了,并供给了参数装备的功用。

 script type="text/javascript" src="jquery.js" /script 
 script type="text/javascript" src="jquery.more.js" /script 

 

xhtml结构如下:

 div id="more" 
 div 
 div 
 div /div 
 div /div 
 /div 
 div /div 
 /div 
 a href="javascript:;" ::点击加载更多内容:: /a 
 /div 

 

值得一提的是,款式single_item,get_more是和jquery.more.js插件相关的,你也能够取别的的class姓名,但是在装备的时分必定要将对应的class写上。

#more{margin:10px auto;width: 560px; 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;} 
.get_more{margin:10px; text-align:center} 
.more_loader_spinner{width:20px; height:20px; margin:10px auto; background: url(loader.gif) 
 no-repeat;}

 以上CSS是本例中定制的,当然,我们能够在实践项目中定制不同的款式。留意,more_loader_spinner是界说加载动画图片的。

jQuery
$(function(){ 
 $(#more).more({address: data.php}) 
});

 运用很简单,装备了后台地址:data.php,来看data.php是怎样处理数据的。

data.php链接数据库,本例运用本站文章PHP+Mysql+jQuery完成发布微博程序--PHP篇相同的数据表。

require_once(connect.php); 
$last = $_POST[last]; 
$amount = $_POST[amount]; 
$user = array(demo1,demo2,demo3,demo3,demo4); 
$query=mysql_query("select * from say order by id desc limit $last,$amount"); 
while ($row=mysql_fetch_array($query)) { 
 $sayList[] = array( 
 content= $row[content], 
 author= $user[$row[userid]], 
 date= date(m-d H:i,$row[addtime]) 
echo json_encode($sayList);

 

data.php接纳前台页面提交过来的两个参数,$_POST[last]即开端记载数,$_POST[amount]即单次显现记载数,看SQL句子就理解,其实就是分页中用到的句子。

然后将查询的成果以JSON格局输出,PHP的使命就完成了。

最终来看下jquery.more.js的参数装备。

amount : 10, //每次显现记载数 
address : comments.php, //恳求后台的地址 
format : json, //数据传输格局 
template : .single_item, //html记载DIV的class特点 
trigger : .get_more, //触发加载更多记载的class特点 
scroll : false, //是否支撑翻滚触发加载 
offset : 100, //翻滚触发加载时的偏移量

 

版权声明
本文来源于网络,版权归原作者所有,其内容与观点不代表AG环亚娱乐立场。转载文章仅为传播更有价值的信息,如采编人员采编有误或者版权原因,请与我们联系,我们核实后立即修改或删除。

猜您喜欢的文章