php+jquery+html实现点击不刷新加载更多的实例代码


Posted in PHP onAugust 12, 2016

基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个“更多”链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录并以JSON的形式返回给前台页面,前台页面jQuery解析JSON数据,并将数据追加到列表页。其实就是Ajax分页效果。

HTML

首先要引入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链接数据库,本例使用本站文章PHP+Mysql+jQuery实现发布微博程序--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',     //滚动触发加载时的偏移量

本文DEMO中需要单击才能加载更多内容,接下来的文章我将会制作通过滚动条来触发加载更多内容的DOMO,敬请关注。

以上这篇php+jquery+html实现点击不刷新加载更多的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
我的论坛源代码(二)
Oct 09 PHP
php获取mysql版本的几种方法小结
Mar 25 PHP
PHP 图片上传代码
Sep 13 PHP
php去除重复字的实现代码
Sep 16 PHP
sql注入与转义的php函数代码
Jun 17 PHP
ThinkPHP之R方法实例详解
Jun 20 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
Aug 20 PHP
php调用自己java程序的方法详解
May 13 PHP
详解PHP队列的实现
Mar 14 PHP
YII框架关联查询操作示例
Apr 29 PHP
PHP下载大文件失败并限制下载速度的实例代码
May 10 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
Feb 27 PHP
php网页版聊天软件实现代码
Aug 12 #PHP
PHP 自动加载的简单实现(推荐)
Aug 12 #PHP
py文件转exe时包含paramiko模块出错解决方法
Aug 12 #PHP
PHP url的pathinfo模式加载不同控制器的简单实现
Aug 12 #PHP
PHP命令行执行整合pathinfo模拟定时任务实例
Aug 12 #PHP
谈谈PHP连接Access数据库的注意事项
Aug 12 #PHP
总结PHP中DateTime的常用方法
Aug 11 #PHP
You might like
咖啡知识大全
2021/03/03 新手入门
PHP原理之异常机制深入分析
2010/08/08 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
解读python logging模块的使用方法
2018/04/17 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
python中Mako库实例用法
2020/12/31 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
技术学校毕业生求职信分享
2013/12/02 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
销售业务员岗位职责
2014/01/29 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
2015年公司新年寄语
2014/12/08 职场文书
廉洁自律证明
2015/06/24 职场文书
赞助商致辞
2015/07/30 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书