• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > php+ajax+jquery实现点击加载更多内容

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了php,jQuery,击加载更多内容等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery+PHP+Mysql实现抽奖程序
  • jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
  • ThinkPHP+jquery实现“加载更多”功能代码
  • PHP+jquery+ajax实现分页
  • JQuery PHP图片在线裁剪实例
  • jQuery的Cookie封装,与PHP交互的简单实现
  • 几种二级联动案例(jQuery\Array\Ajax php)
  • jquery ajax结合thinkphp的getjson实现跨域的方法
  • jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
  • jQuery+PHP实现微信转盘抽奖功能的方法

相关文章

  • 2017-08-16jquery图片轮播特效代码分享
  • 2017-08-16jquery 如何动态添加、删除class样式方法介绍
  • 2017-08-16Jquery动态进行图片缩略的原理及实现
  • 2017-08-16jquery keypress,keyup,onpropertychange键盘事件
  • 2017-08-16BootStrap按钮标签及基本样式
  • 2017-08-16jqGrid日期格式的判断示例代码(开始日期与结束日期)
  • 2017-08-16jQuery中 noConflict() 方法使用
  • 2018-01-28jQuery教程-jQuery入门
  • 2017-08-16基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
  • 2017-08-16基于jQuery实现模拟页面加载进度条

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery 插件实现图片延迟加载效果代码
    • 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
    • Jquery动态添加输入框的方法
    • jQuery实现Meizu魅族官方网站的导航菜单效果
    • jQuery中slice()方法用法实例
    • jQuery蓝色风格滑动导航栏代码分享
    • 用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
    • jquery ui dialog ie8出现滚动条的解决方法
    • jQuery插件fullPage.js实现全屏滚动效果
    • 目前流行的JavaScript库的介绍及对比

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有