jQuery+PHP+ajax实现微博加载更多内容列表功能


Posted in PHP onJune 27, 2014

在一些微博网站上我们经常可以看到这样的应用,微博内容列表上并没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击“查看更多”来加载更多记录。本文将结合jQuery和PHP给大家讲述如何实现这种功能。

Ajax加载的基本原理:当页面载入时,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 class="single_item"> 
   <div class="element_head"> 
    <div class="date"></div> 
    <div class="author"></div> 
   </div> 
   <div class="content"></div> 
  </div> 
  <a href="javascript:;" class="get_more">::点击加载更多内容::</a> 
</div>

需要指出的是,样式single_item,get_more是和jquery.more.js插件关联的,你也可以取另外的class名字,但是在配置的时候一定要将对应的class写上。

CSS样式如下:

#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是怎么处理数据的。

PHP部分

data.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',   //滚动触发加载时的偏移量
PHP 相关文章推荐
用PHP的ob_start();控制您的浏览器cache!
Feb 14 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
Apr 23 PHP
无需重新编译php加入ftp扩展的解决方法
Feb 07 PHP
浅析php中如何在有限的内存中读取大文件
Jul 02 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
Jul 18 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
Jun 27 PHP
PHP中遇到的时区问题解决方法
Jul 23 PHP
PHP编写daemon process 实例详解
Nov 13 PHP
PHP设计模式之原型设计模式原理与用法分析
Apr 25 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
Jul 21 PHP
Laravel 框架控制器 Controller原理与用法实例分析
Apr 14 PHP
PHP如何通过date() 函数格式化显示时间
Nov 13 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
Jun 27 #PHP
php使用GeoIP库实例
Jun 27 #PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
Jun 26 #PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
Jun 26 #PHP
ThinkPHP模板自定义标签使用方法
Jun 26 #PHP
ThinkPHP调用百度翻译类实现在线翻译
Jun 26 #PHP
使用ThinkPHP+Uploadify实现图片上传功能
Jun 26 #PHP
You might like
PHP实现时间轴函数代码
2011/10/08 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
JavaScript Timer实现代码
2010/02/17 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
python双向链表实现实例代码
2013/11/21 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
python调用百度语音REST API
2018/08/30 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
python版DDOS攻击脚本
2019/06/12 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
.net软件工程师面试题
2015/03/31 面试题
大学生实习感言
2014/01/16 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
总经理聘用协议书
2015/09/21 职场文书
Java设计模式之享元模式示例详解
2022/03/03 Java/Android
Python的property属性详细讲解
2022/04/11 Python