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 相关文章推荐
提升PHP速度全攻略
Oct 09 PHP
php设计模式 Bridge (桥接模式)
Jun 26 PHP
php数组(array)输出的三种形式详解
Jun 05 PHP
浅析php中如何在有限的内存中读取大文件
Jul 02 PHP
PHP根据IP判断地区名信息的示例代码
Mar 03 PHP
php读取flash文件高宽帧数背景颜色的方法
Jan 06 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
Aug 31 PHP
php 的反射详解及示例代码
Aug 25 PHP
Thinkphp连表查询及数据导出方法示例
Oct 15 PHP
PHP常用的三种设计模式
Feb 17 PHP
Laravel中使用Queue的最基本操作教程
Dec 27 PHP
360搜索引擎自动收录php改写方案
Apr 28 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
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
Python实现的凯撒密码算法示例
2018/04/12 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
总结python中pass的作用
2019/02/27 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
python中count函数简单用法
2020/01/05 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
应届生护士求职信
2013/11/01 职场文书
挂职自我鉴定
2014/02/26 职场文书
《穷人》教学反思
2014/04/08 职场文书
请假条的格式
2014/04/11 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
新员工试用期自我评价
2015/03/10 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA