基本原理:页面载入时,向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个“更多”链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录并以JSON的形式返回给前台页面,前台页面jQuery解析JSON数据,并将数据追加到列表页。其实就是Ajax分页效果。
1.引入jquery库和jquery.more.js插件,jquery.more.js已经将许多功能都封装好了,并提供了参数配置的功能。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.more.js"></script>
2 html结构
<ul id="more" style="display: block;"> <li class="show-box"> <div class="box"> <div class="left"> <a href="url"><img src="thumbUrl"></a> </div> <div class="right"> <a href="#" class="title"></a> <p class="digest"></p> <span class="time"> <i></i> <span class="updateTime"></span> </span> </div> </div> </li> <li class="loadMore"><a href="javascript:;">加载更多>></a></li> </ul>
页面里面的 title digest updatatime对应数据里面的属性名,loadMore是和jquery.more.js插件关联的,你也可以取另外的class名字,但是在配置的时候一定要将对应的class写上。
js
$(function(){ $('#more').more({'address': 'http://192.168.3.233:8000/agriculture/ajax/info'}) });
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);
接收前台页面提交过来的两个参数,$_POST['last']即开始记录数,$_POST['amount']即单次显示记录数,看SQL语句就明白,其实就是分页中用到的语句。
然后将查询的结果以JSON格式输出,PHP的任务就完成了。
最后来看下jquery.more.js的参数配置。
'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 'template' : '.show-box', //html记录DIV的class属性 'trigger' : '.loadMore', //触发加载更多记录的class属性 'scroll' : 'false', //是否支持滚动触发加载 'offset' : '100', //滚动触发加载时的偏移量
jquery.more.js文件
(function( $ ){ var target = null; var template = null; var lock = false; var variables = { 'last' : 0 } var settings = { 'amount' : '10', 'address' : 'comments.php', 'format' : 'json', 'template' : '.show-box', 'trigger' : '.loadMore', 'scroll' : 'false', 'offset' : '100', 'spinner_code': '' } var methods = { init : function(options){ return this.each(function(){ if(options){ $.extend(settings, options); } template = $(this).children(settings.template).wrap('<div/>').parent(); template.css('display','none') $(this).append('<div class="more_loader_spinner">'+settings.spinner_code+'</div>') $(this).children(settings.template).remove() target = $(this); if(settings.scroll == 'false'){ $(this).find(settings.trigger).bind('click.more',methods.get_data); $(this).more('get_data'); } else{ if($(this).height() <= $(this).attr('scrollHeight')){ target.more('get_data',settings.amount*2); } $(this).bind('scroll.more',methods.check_scroll); } }) }, check_scroll : function(){ if((target.scrollTop()+target.height()+parseInt(settings.offset)) >= target.attr('scrollHeight') && lock == false){ target.more('get_data'); } }, debug : function(){ var debug_string = ''; $.each(variables, function(k,v){ debug_string += k+' : '+v+'\n'; }) alert(debug_string); }, remove : function(){ target.children(settings.trigger).unbind('.more'); target.unbind('.more') target.children(settings.trigger).remove(); }, add_elements : function(data){ //alert('adding elements') var root = target // alert(root.attr('id')) var counter = 0; if(data){ $(data).each(function(){ counter++ var t = template $.each(this, function(key, value){ if(key == 'url'){ //console.log(t.find('.'+key)) t.find('.'+key).attr("href",value) }else if (key == 'thumbUrl'){ var newvalue = '/'+value; t.find('.'+key).attr("src",newvalue) } else { //console.log(key) t.find('.'+key).html(value) } }) //t.attr('id', 'more_element_'+ (variables.last++)) if(settings.scroll == 'true'){ // root.append(t.html()) root.children('.more_loader_spinner').before(t.html()) }else{ // alert('...') root.children(settings.trigger).before(t.html()) } root.children(settings.template+':last').attr('id', 'more_element_'+ ((variables.last++)+1)) }) } else methods.remove() target.children('.more_loader_spinner').css('display','none'); if(counter < settings.amount) methods.remove() }, get_data : function(){ // alert('getting data') var ile; lock = true; target.children(".more_loader_spinner").css('display','block'); $(settings.trigger).css('display','none'); if(typeof(arguments[0]) == 'number') ile=arguments[0]; else { ile = settings.amount; } $.post(settings.address, { last : variables.last, amount : ile }, function(data){ $(settings.trigger).css('display','block') methods.add_elements(data) lock = false; }, settings.format) } }; $.fn.more = function(method){ if(methods[method]) return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); else if(typeof method == 'object' || !method) return methods.init.apply(this, arguments); else $.error('Method ' + method +' does not exist!'); } })(jQuery)