点击加载更多内容

基本原理：页面载入时，向后台请求数据，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)