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下拉刷新,上拉自动加载更多 下拉刷新以及加载更多
随机推荐
- CentOS 6编译安装RabbitMQ
编译安装Python 下载python源文件 [root@localhost src]# tar -xzvf python-2.7.11.tar.gz [root@localhost src]# cd ...
- SQL报表语句；SQL获取今日、本周、本月数据
SQL报表语句 SQL获取今日.本周.本月数据 本日:select * from table where datediff(dd,C_CALLTIME,getdate())=0 --C ...
- Linux系统安装MySQL（2020最新最详细）
2020最新Linux系统发行版ContOS7演示安装MySQL. 为防止操作权限不足,建议切换root用户,当然如果你对Linux命令熟悉,能够自主完成权限更新操作,可以不考虑此推荐. 更多命令学习 ...
- python执行 sql 语句
写的很好 import pymysql conn = pymysql.connect(host = '127.0.0.1',port = 3306,user = 'root',passwd = '12 ...
- HBase基础理论知识
来源:第四章:大数据 の HBase 基础 本课主题 NoSQL 数据库介绍 HBase 基本操作 HBase 集群架构与设计介紹 HBase 与HDFS的关系 HBase 数据拆分和紧缩 引言 ...
- SpringMVC中ModelAndView的两个jar包引起的思考servlet和portlet
在使用ModelAndView时,需要去导包,但是有两个包. 检查前台form表单提交的也正确,后台这也没有问题. 后来发现竟然时导包导错误了. 到此,如果是因为到错包问题,应该就解决了. 但是,深入 ...
- 【django-simpleui】‘simpletags‘ is not a registered tag library报错的解决方法
1:创建 templatetags文件夹 2:创建simpletags.py文件将内容粘贴进去,在下面 3:setting.py添加文件指定: 1 TEMPLATES = [ 2 { 3 'BACK ...
- php的三元运算符
简单记录一哈php的三元运算符的用法: 啥子是三元运算,即第一个表达式作为判断条件,在后面两个表达式中选择一个执行. 若判断成立,则执行第二个表达式,否则执行第三个表达式. 看到好多网友都说的不 ...
- java常用类——包装类
八种基本数据类型对应八种包装类和它们的继承关系 基本数据类型 对应的包装类 boolean Boolean byte Byte short Short int Integer long Long ch ...
- windows编译openssl(64位)一游
编译openssl,一套标准流程: (环境: win10 64位os, vs2019) 需要的工具:perl nasm openssl源码包 1 安装perl 2 下载nasm,将n ...