jQuery+PHP实战实现浏览更多内容

开发 前端
我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击“查看更多”来加载更多记录。本文我将结合jQuery和PHP给大家讲述如何实现这种应用。

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

XHTML

首先要引入jquery库和jquery.more.js插件,jquery.more.js已经将许多功能都封装好了,并提供了参数配置的功能。

  1. <script type="text/javascript" src="jquery.js"></script>   
  2. <script type="text/javascript" src="jquery.more.js"></script>  

xhtml结构如下:

  1. <div id="more">   
  2.      <div class="single_item">   
  3.            <div class="element_head">   
  4.                <div class="date"></div>   
  5.                <div class="author"></div>   
  6.             </div>   
  7.             <div class="content"></div>   
  8.      </div>   
  9.      <a href="javascript:;" class="get_more">::点击加载更多内容::</a>   
  10. </div>   

值得一提的是,样式single_item,get_more是和jquery.more.js插件关联的,你也可以取另外的class名字,但是在配置的时候一定要将对应的class写上。

CSS

  1. #more{margin:10px auto;width560px;  border1px solid #999;}                  
  2. .single_item{padding20pxborder-bottom1px dotted #d3d3d3;}   
  3. .author{positionabsolute; left: 0pxfont-weight:boldcolor:#39f}   
  4. .date{positionabsolute; right: 0pxcolor:#999}   
  5. .content{line-height:20px; word-break: break-all;}   
  6. .element_head{width100%positionrelativeheight20px;}   
  7. .get_more{margin:10pxtext-align:center}   
  8. .more_loader_spinner{width:20pxheight:20pxmargin:10px autobackgroundurl(loader.gif)   
  9.  no-repeat;}  

以上CSS是本例中定制的,当然,大家可以在实际项目中定制不同的样式。注意,more_loader_spinner是定义加载动画图片的。

jQuery

  1. $(function(){   
  2.     $('#more').more({'address''data.php'})   
  3. });  

使用很简单,配置了后台地址:data.php,来看data.php是怎么处理数据的。

PHPdata.php链接数据库,本例使用本站文章PHP+Mysql+jQuery实现发布微博程序--PHP篇相同的数据表。

  1. require_once('connect.php');   
  2.    
  3. $last = $_POST['last'];   
  4. $amount = $_POST['amount'];   
  5.    
  6. $user = array('demo1','demo2','demo3','demo3','demo4');   
  7. $query=mysql_query("select * from say order by id desc limit $last,$amount");   
  8. while ($row=mysql_fetch_array($query)) {   
  9.     $sayList[] = array(   
  10.         'content'=>$row['content'],   
  11.         'author'=>$user[$row['userid']],   
  12.         'date'=>date('m-d H:i',$row['addtime'])   
  13.       );   
  14. }   
  15. echo json_encode($sayList);  

data.php接收前台页面提交过来的两个参数,$_POST['last']即开始记录数,$_POST['amount']即单次显示记录数,看SQL语句就明白,其实就是分页中用到的语句。

然后将查询的结果以JSON格式输出,PHP的任务就完成了。

***来看下jquery.more.js的参数配置。

  1. 'amount'      :   '10',           //每次显示记录数   
  2. 'address'     :   'comments.php', //请求后台的地址   
  3. 'format'      :   'json',         //数据传输格式   
  4. 'template'    :   '.single_item', //html记录DIV的class属性   
  5. 'trigger'     :   '.get_more',    //触发加载更多记录的class属性   
  6. 'scroll'      :   'false',        //是否支持滚动触发加载   
  7. 'offset'      :   '100',          //滚动触发加载时的偏移量  

源文件下载

原文链接:http://www.helloweba.com/view-blog-130.html

【编辑推荐】

  1. jQuery实战开发表单验证与自动完成提示插件
  2. 从零开始学习jQuery之必知的工具函数
  3. 从零开始学习jQuery之jQuery实施方案
  4. jQuery给力插件大阅兵
  5. jQuery从入门到精通
责任编辑:陈贻新 来源: helloweba.com
相关推荐

2010-12-28 13:44:12

PHPXMLjQuery

2010-10-27 10:02:36

PHP

2012-06-12 16:45:57

PHP

2010-10-25 10:07:48

jQuery

2011-03-23 10:55:55

PHPMySQLjQuery

2015-07-31 11:36:14

倾斜手机查看图片

2011-05-18 13:43:52

jQueryAjaxPHP

2010-03-05 17:24:04

Android智能系统

2011-05-18 13:28:46

jQueryPHPAJAX

2013-12-09 09:57:37

2020-10-14 11:30:10

PHP网络安全加密

2012-02-08 17:01:36

2013-07-31 11:11:47

Windows 8.1

2011-04-26 10:19:46

BlackBerry

2011-07-06 16:26:32

jQuery Mobi

2016-09-29 08:36:38

2017-10-11 18:17:06

大数据数据可视化前后端

2011-07-20 10:56:53

jQuery Mobi手机新闻浏览器

2010-12-16 09:34:48

差异备份

2011-07-26 08:40:31

jQuery Mobi组件内容格式
点赞
收藏

51CTO技术栈公众号