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

随机推荐

zookeeper在生产环境中的配置(zookeeper3.6)
一,zookeeper中日志的配置 1,快照文件snapshot的目录: dataDir=/data/zookeeper/data 存储快照文件snapshot的目录.默认情况下,事务日志也会存储在这 ...
Centos定时备份 MySQL数据库
一.编写数据库备份脚本 backupmysql.sh #!/bin/bash # Name:bakmysql.sh # This is a ShellScript For Auto DB Backup ...
QJsonObject 遍历
遍历QjsonObject方式方式一 QJsonObject::const_iterator it = l_obj.constBegin(); QJsonObject::const_iterator ...
Python使用psycopg2模块操作PostgreSQL
https://blog.csdn.net/pcent/article/details/78643611
Windows Server 2019 在桌面图标
直接按Win(键盘上的微软徽标键)+R,输入: rundll32.exe shell32.dll,Control_RunDLL desk.cpl,,0 回车 rundll32.exe shell32. ...
NB-IoT的eDRX模式主要目的是什么
传统的2.56秒寻呼间隔对UE的电量消耗较大,NB-IoT的eDRX模式主要目的就是支能够持更长周期的寻呼监听,从而达到省电的目的.而在下行数据发送频率小时,通过核心网和用户终端的协商配合,用户终端调 ...
4G DTU模块的工作原理
DTU是无线数据传输模块,4G DTU又被称4G模块,是4G网络进行远距离传输的设备,即串口服务器的无线版,其功能与串口服务器类似. 4G DTU是一种物联网无线数据终端,利用公用运营 ...
Java学习的第四十一天
1.例4.4内置函数 public class cjava { public static void main(String[] args) { int i=10,j=20,k=30,m; m=max ...
华为云FusionInsight湖仓一体解决方案的前世今生
摘要:华为云发布新一代智能数据湖华为云FusionInsight时再次提到了湖仓一体理念,那我们就来看看湖仓一体的来世今生. 伴随5G.大数据.AI.IoT的飞速发展,数据呈现大规模.多样性的极速增长 ...
Linux 系统编程学习：02-进程间通信1：Unix IPC（1）管道
Linux 系统编程学习:02-进程间通信1:Unix IPC(1)管道背景上一讲我们介绍了创建子进程的方式.我们都知道,创建子进程是为了与父进程协作(或者是为了执行新的程序,参考 Linux ...

PHP+Ajax点击加载更多内容

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

随机推荐

热门专题