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截取utf-8中文字符串乱码的解决方法
Mar 29 PHP
PHP目录函数实现创建、读取目录教程实例
Jan 13 PHP
php实现文件下载更能介绍
Nov 23 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
Sep 22 PHP
php遍历目录与文件夹的多种方法详解
Nov 14 PHP
PHP SplObjectStorage使用实例
May 12 PHP
php实现mysql数据库分表分段备份
Jun 18 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
Oct 08 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
Mar 02 PHP
Yii框架Session与Cookie使用方法示例
Oct 14 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
Oct 16 PHP
使用Git实现Laravel项目的自动化部署
Nov 24 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 autoload机制的详解
2013/06/09 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
php 修改密码实现代码
2017/05/24 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
《海伦?凯勒》教学反思
2014/04/17 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
运动员入场词
2015/07/18 职场文书
学生会主席任命书
2015/09/21 职场文书
高一作文之乐趣
2019/11/21 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技