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 firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
js特殊字符转义介绍
Nov 05 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 Javascript
JavaScript实现缓动动画
Nov 25 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
python 的列表遍历删除实现代码
2020/04/12 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
儿媳婚宴答谢词
2014/01/14 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
数据保密承诺书
2014/06/03 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015年妇女工作总结
2015/05/14 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
Mysql Online DDL的使用详解
2021/05/20 MySQL