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

随机推荐

【应用服务 App Service】App Service发生错误请求时，如何查看IIS Freb日志，从中得知错误所发生的模块，请求中所携带的Header信息
问题描述在使用Azure App Service时候,我们有时候对一些请求发生错误毫无头绪,能从错误代码中知道请求错误,但是更多的信息呢? 当我们需要更多的信息时候,通常有以下的一些方式来查找问题 ...
SpringMVC异常的处理机制
SpringMVC异常的处理机制处理流程图其本质还是把异常交给SpringMVC框架来处理系统的dao.service.controller出现异常都通过throws Exception向上抛出 ...
docker启动redis并设置密码
docker启动redis并设置密码: docker run -d --name redis -p 6379:6379 redis --requirepass "password" ...
git学习(十) idea git reset 操作
git reset 是回滚操作,在 idea 中使用如下: Reset Type 有三种: Mixed 默认方式,只保留源码,回退 commit 和 index 信息 Soft 回退到某个版本,只回退 ...
深度学习四从循环神经网络入手学习LSTM及GRU
循环神经网络简介循环神经网络(Recurrent Neural Networks, RNN) 是一类用于处理序列数据的神经网络.之前的说的卷积神经网络是专门用于处理网格化数据(例如一个图像)的神经 ...
RAM ROM区别记忆
我老是忘这个 1.概念 RAM即随机存储内存,这种存储器在断电时将丢失其存储内容,故主要用于存储短时间使用的程序.ROM即只读内存,是一种只能读出事先所存数据的固态半导体存储器. 2.对比手机中的R ...
java安全编码指南之:文件IO操作
目录简介创建文件的时候指定合适的权限注意检查文件操作的返回值删除使用过后的临时文件释放不再被使用的资源注意Buffer的安全性注意 Process 的标准输入输出 InputStream ...
C#连接Access
连接数据库 string oleCon = @"Provider=Microsoft.ACE.OLEDB.12.0;Data Source= " + Application.Sta ...
Java8新特性探索之Optional类
为什么引入Optional类? 身为一名Java程序员,大家可能都有这样的经历:调用一个方法得到了返回值却不能直接将返回值作为参数去调用别的方法.我们首先要判断这个返回值是否为null,只有在非空的前 ...
exe打包成安装文件（界面美观）
前言在开发windows桌面应用过程中,软件交付时,一般都是交付安装包. 安装文件的优点显得更正规,安装界面也可展示软件特点介绍,可自动生成桌面图标等: 安装包体积要比软件小,方便下载. 探索之路 ...

PHP+Ajax点击加载更多内容

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

随机推荐

热门专题