PHP+Ajax点击加载更多内容

css样式:

  <style type="text/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;}

        </style>

html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

</head>

  <style type="text/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;}

        </style>

<body>

         <div class="container">

                <div id="more">

                    <div class="single_item">

                        <div class="element_head">

                            <div class="date"></div>

                            <div class="author"></div>

                        </div>

                        <div class="title"></div>

                    </div>

                    <a href="javascript:;" class="get_more">加载更多</a>

            </div>

</body>

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

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

        <script type="text/javascript">

            $(function() {

                $('#more').more({'address': 'ajax.php'})

            });

        </script>

</html>

后台请求:

<?

//替换自己即可

$connect=mysql_connect("localhost","root","root");

mysql_select_db('test',$connect);

/*数据库连接参数*/

$last = $_POST['last'];

$amount = $_POST['amount'];

$query = mysql_query("select * from news order by id desc limit $last,$amount");

while ($row = mysql_fetch_array($query)) {

    $sayList[] = array(

        'title' => $row['title'],

        'author' => $row['id'],

        'date' => date('m-d H:i', $row['submitTime'])

    );

}

echo json_encode($sayList);

?>

关键jquery.more.js

(function( $ ){

    var target = null;

    var template = null;

    var lock = false;

    var variables = {

        'last'      :    0

    }

    var settings = {

        'amount'      :   '1',

        'address'     :   'comments.php',

        'format'      :   'json',

        'template'    :   '.single_item',

        'trigger'     :   '.get_more',

        '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.more.js相关API
参数描述默认值
amount 每次显示记录数 10
address 请求后台的地址 -
format 数据传输格式 json
template html记录DIV的class属性 .single_item -
trigger 触发加载更多记录的class属性 .get_more -
scroll 是否支持滚动触发加载 false
offset 滚动触发加载时的偏移量 100

PHP+Ajax点击加载更多内容的更多相关文章

PHP+Ajax点击加载更多内容－这个效果好，速度快，只能点击更多加载，不能滚动自动加载
这个效果好,速度快,只能点击更多加载,不能滚动自动加载一.HTML部分 <div id="more"> <div class="single_item ...
PHP+Ajax点击加载更多列表数据实例
一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...
ajax点击加载更多数据图片（预加载）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
jQuery+php+Ajax文章列表点击加载更多功能
jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...
Jquery点击加载更多
一.点击加载更多有点像分页获取数据类似,下面是本人写的一个简单的小例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
js点击加载更多可以增加几条数据的显示
<div class="list"> <div class="one"> <div class="img" ...
Spring+Hibernate+struts2+JPA 注解+跨域//完成手机端点击加载更多下拉加载更多
一.使用IDEA新建一个maven项目(student) 1.1.0编写pom文件,添加项目所需要的包 <?xml version="1.0" encoding=" ...
tableView中的“点击加载更多”点击不到
假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当 ...
android ListView的上部下拉刷新下部点击加载更多具体实现及拓展
android ListView的上部下拉刷新下部点击加载更多具体实现及拓展 ListView下拉刷新,上拉自动加载更多下拉刷新以及加载更多

随机推荐

__getattr__和__setattr__
getattr 拦截运算(obj.xx),对没有定义的属性名和实例,会用属性名作为字符串调用这个方法 class F(object): def __init__(self): self.name = ...
第三十五章 Linux常规练习题（二）参考答案
一.练习题一 1.删除用户基本组shanghai03.发现无法正常删除,怎样才能将其删除掉,不能删除用户. groupdel shanghai03 移除其所属组的用户 2.打开多个xshell窗口连接 ...
Seaborn中几种作图方式
趋势 sns.pointplot - 点图 ,比折线图好使 sns.lineplot - 折线图最适合显示一段时间内的趋势,多条线可以用来显示多个组中的趋势. 关系 - 可以使用许多不同的图表类型来理 ...
SVN如何回滚到指定版本
以下内容网上收集整理. 方法一. 利用Export,这样你可以不丢失你新建的文件.打开你想要回滚的文件夹(受SVN版本控制).右键Tortoise SVN,然后在列表中选择 show log, 在看到 ...
【原创】linux实时操作系统xenomai x86平台基准测试(benchmark）
一.前言 benchmark 即基准测试.通常操作系统主要服务于应用程序,其运行也是需要一定cpu资源的,一般来说操作系统提供服务一定要快,否则会影响应用程序的运行效率,尤其是实时操作系统.所以本文针 ...
线上问题排查，一不小心踩到阿里的 arthas坑了
最近帮新来的校招同学排查一个线上问题,问题本身不是很难,但是过程中踩到了一个arthas的坑,挺有意思的. 同时,也分享下在排查过程中使用的一些比较实用的工具,包括tcpdump.arthas.sim ...
【总结】IP
一. IP基本认识 1.IP 在 TCP/IP 参考模型中处于第三层,也就是网络层. 网络层的主要作用是:实现主机与主机之间的通信,也叫点对点(end to end)通信 2.网络层与数据链路层有什么 ...
深入了解Redis(8)-高可用方案
生产环境中的redis基本都是多节点部署,本文只讨论redis高可用的三种方案,不涉及实际操作. 一.主从复制(一主一从,一主多从,级联结构) (图来源于网络) 一个Master,两个Slave,Sl ...
selenium中的三种等待方式
1.强制等待,采用的time.sleep,然后后面加上要等待的时间: 2.隐性等待implicitly_wait,隐性等待设定后,会对之后的所有代码生效,会在设定的时间之内,不停的去查找元素,如果找到 ...
浅谈分布式共识算法raft
前言:在分布式的系统中,存在很多的节点,节点之间如何进行协作运行.高效流转.主节点挂了怎么办.如何选主.各节点之间如何保持一致,这都是不可不面对的问题,此时raft算法应运而生,专门用来解决上述问题 ...

PHP+Ajax点击加载更多内容

PHP+Ajax点击加载更多内容的更多相关文章

随机推荐

热门专题