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+javascript实现二级级联菜单的制作
May 06 PHP
javascript,php获取函数参数对象的代码
Feb 03 PHP
PHP中遍历stdclass object的实现代码
Jun 09 PHP
PHP中获取文件扩展名的N种方法小结
Feb 27 PHP
基于PHP常用字符串的总结(待续)
Jun 07 PHP
php实现图形显示Ip地址的代码及注释
Jan 20 PHP
php读取富文本的时p标签会出现红线是怎么回事
May 13 PHP
PHP 实现判断用户是否手机访问
Jan 21 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
Jan 22 PHP
ThinkPHP实现更新数据实例详解(demo)
Jun 29 PHP
php中html_entity_decode实现HTML实体转义
Jun 13 PHP
php和asp语法上的区别总结
May 12 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 木马攻击防御技巧
2009/06/13 PHP
paypal即时到账php实现代码
2010/11/28 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
php如何连接sql server
2015/10/16 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
如何在存储过程中使用Loop
2016/01/05 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
2014法制宣传日活动总结
2014/07/09 职场文书
个人催款函范文
2015/06/24 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python