php+ajax+jquery实现点击加载更多内容


Posted in Javascript onMay 03, 2015

我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击“查看更多”来加载更多记录。本文我将结合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 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',          //滚动触发加载时的偏移量

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript第一课
Feb 27 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
tsconfig.json配置详解
May 17 Javascript
layui表格数据重载
Jul 27 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
JavaScript实现优先级队列
Dec 06 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 #Javascript
javascript结合canvas实现图片旋转效果
May 03 #Javascript
浅谈javascript语法和定时函数
May 03 #Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 #Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 #Javascript
jQuery中 attr() 方法使用小结
May 03 #Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 #Javascript
You might like
PHP4实际应用经验篇(6)
2006/10/09 PHP
PHP之变量、常量学习笔记
2008/03/27 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
Python 列表(List)操作方法详解
2014/03/11 Python
Python中的引用知识点总结
2019/05/20 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
python中的插入排序的简单用法
2021/01/19 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
《海伦?凯勒》教学反思
2014/04/17 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
大学生学期个人总结
2015/02/12 职场文书
幼儿园开学通知
2015/04/24 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
惊天动地观后感
2015/06/10 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
alibaba seata服务端具体实现
2022/02/24 Java/Android
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫