帝国模板之家为广大用户提供专业、一站式建站服务。

网站开发

网站开发栏目,介绍前端、后台、服务器、数据库、建站工具等实用网站开发教程。

当前位置:首页 > 教程 > 网站开发 > 正文

jQuery+PHP实现列表页点击浏览更多内容

帝国模板之家 2020-08-28 网站开发 评论

我们在浏览网站的时候会发现这样一个功能,网站的列表页,不是使用的传统分页模式,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击“查看更多”来加载更多记录。这个功能要怎么实现呢?今天,帝国模板之家小编给大家分享一个方法,使用php+jquery来实现。

首先要引入jquery库和jquery.more.js插件,jquery.more.js已经将许多功能都封装好了(文章底部会提供jquery.more.js代码),并提供了参数配置的功能。

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

html结构如下:

<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;}

注意,more_loader_spinner是定义加载动画图片的。

jQuery代码如下:

$(function(){
    $('#more').more({'address': 'data.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',          //滚动触发加载时的偏移量

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'    :   '.single_item', //html记录DIV的class属性
        'trigger'     :   '.get_more',    //触发加载更多记录的class属性
        '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(t.find('.'+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)  

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

以上就是jQuery+PHP实现列表页点击浏览更多内容的方法,更多相关内容请关注帝国模板之家其他文章。

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言