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

随机推荐

centos8平台使用wkhtmltopdf实现html网页转pdf
一,wkhtmltopdf的用途 wkhtmltopdf可以直接把任何一个可以在浏览器中浏览的网页直接转换成一个pdf 说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnb ...
Linux入门到放弃之一《在VMware虚拟机中安装Linux系统（RedHat）》
1.启动VMware: 2.新建虚拟机: 3.自定义配置(1安装客户机操作系统点击"稍后安装操作系统"2选择客户机操作系统为Linux,版本为Red Hat Enterprise ...
linux设置systemctl 启动脚本
centos 7 服务的systemctl 脚本一般存在:/usr/lib/systemd目录.目录下又分为system,和user之分, /usr/lib/systemd/system #系统服务, ...
JS初级运算符优先级
该图优先级由高到低显示
oracle oracle sqldeveloper 12505 创建连接失败
ref:http://blog.csdn.net/yangwenxue_admin/article/details/45062557
Sqoop源码解析
date: 2020-05-31 12:09:00 updated: 2020-08-21 17:33:00 Sqoop源码解析 org.apache.sqoop 文件夹参考文档: https:// ...
数据恢复软件推荐-easyrecovery绿色破解版（附注册码）免费下载
easyrecovery破解版专注于PC端存储数据的抢救恢复,软件的整体界面风格和360杀毒有些许相似,没有看起来像牛皮藓的杂乱广告,只有六个功能按键,对应你所遇到的数据丢失状况级别,点击最为适合的功 ...
Mysql优化建议
Mysql优化建议: (1)CPU要更快,而不是更多.因为mysql不支持多个处理器并发处理一条sql,所以正常情况下不需要考虑更多的CPU.当然,你的系统中的对mysql的并发很高时,多核可以解决一 ...
python基础二：循环
python 中循环的方式有两种: 一,for 循环单向循环可以用来遍历字符串,列表,元组,字典等 for value in 被遍历对象: print(value) 遍历字典dict的时候稍有不 ...
Kubernetes 1.13 的完整部署手册
前言: 非常详细的K8s的完整部署手册,由于Kubernetes版本和操作系统的版本关系非常敏感,部署前请查阅版本关系对应表地址:https://github.com/kubernetes/kube ...

PHP+Ajax点击加载更多内容

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

随机推荐

热门专题