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下拉刷新,上拉自动加载更多下拉刷新以及加载更多

随机推荐

SQL中 char varchar和nvarchar的区别
转至:http://www.cnblogs.com/carekee/articles/2094676.html char char是定长的,也就是当你输入的字符小于你指定的数目时,char(8) ...
Linux文件系统和管理-2文件操作命令（中）
创建空文件和刷新时间 touch touch命令可以用来创建空文件或刷新文件的时间 touch 存在的文件刷新时间,不存在的文件创建空文件生成指定日期的日志文件 [root@C8-1 ~]# dat ...
2018HUAS_ACM暑假比赛5题解
目录 Problem A Problem B Problem C Problem D Problem E Problem F Problem A 思路这是一道带权并查集问题因为只有三种种类,我们分 ...
Java8新特性--Base64转换
1.简介在Java8中,Base64编码已经成为Java类库的标准.Java 8 内置了 Base64 编码的编码器和解码器. Base64工具类提供了一套静态方法获取下面三种BASE64编解码器: ...
Java POST请求案例
<<<<<<<<<<<<<<<<<<<<<<<<< ...
C#设计模式-模板方法模式(Template Method)
概念模板指一些可以套用的公共内容,例如网页模板是当网站中有许多页面版式色彩相同的情况下,将其定义为网页模板,并定义其中部分可编辑,部分不可编辑,那么在利用网页模板制作其他页面时就会很方便,不易出错. ...
k8s各组件启动时, -v参数指定的日志级别
k8s 相关组件启动时 -v参数指定的日志级别 --v=0 Generally useful for this to ALWAYS be visible to an operator. --v=1 A ...
走在深夜的小码农 Sixth Day
Css3 Six Day writer:late at night codepeasant 学习大纲: 一.其他样式 1.圆角边框在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了. ...
NOIP 2018 D1 解题报告(Day_1)
总分 205分 T1 100分 T2 95分 T3 10分 T1: 题目描述春春是一名道路工程师,负责铺设一条长度为 nn 的道路. 铺设道路的主要工作是填平下陷的地表.整段道路可以看作是 ...
CF1008D Pave the Parallelepiped
容斥原理解法一: 其他容斥原理的题也可以用这种思想先把$A$,$B$,$C$分解因数一种很暴力的想法是,将这些因数分成若干个集合(画出韦恩图),然后对有序数组的三个数分别枚举其位于哪一个集合中 ...

PHP+Ajax点击加载更多内容

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

随机推荐

热门专题