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下拉刷新,上拉自动加载更多 下拉刷新以及加载更多
随机推荐
- apache的ab压力测试介绍
1.ab命令原理 Apache的ab命令模拟多线程并发请求,测试服务器负载压力,也可以测试nginx.lighthttp.IIS等其它Web服务器的压力. ab命令对发出负载的计算机要求很低,既不会占 ...
- django—模板相关
关于在html文件中使用模板语言时,一些符号的含义 {{}}:显示变量相关,在模板渲染的时候替换成值 {%%}:处理逻辑相关 django模板语言中,对于列表字典等容器类型,不能够通过[ 索引/键值 ...
- Java中<?>，<? extends E>，<? super E>
在集合中,经常可看到<?>,<? extends E>,<? super E>,它们都是属于泛型: <?>: 是泛型通配符,任意类型,如果没有明确,那么 ...
- 在PostgreSQL中CREATE STATISTICS
如果你用Postgres做了一些性能调优,你可能用过EXPLAIN.EXPLAIN向你展示了PostgreSQL计划器为所提供的语句生成的执行计划,它显示了语句所引用的表如何被扫描(使用顺序扫描.索引 ...
- MFiX中DEM颗粒信息随时间变化
之前在"DEM轨迹后处理"这篇文章中的第二种方法中介绍过一种方法,但是那种方法只适用于反应器内颗粒数量一定,没有新进入的颗粒的情况.后来在MFiX论坛询问了一下,解决了这个问题.具 ...
- day05 selenium基本使用
本文通过举例介绍selenium的基本使用方法,用来爬取京东笔记本电脑的商品信息,包括名称,url,价格,评价信息. from selenium import webdriver # 导入键盘Keys ...
- IPEX-1代/3代/4代/5代，PCB天线底座，公头，样式及封装尺寸图
1.IPEX-1代,PCB天线底座 2.IPEX-3代,PCB天线底座 3.IPEX-4代,PCB天线底座 4.IPEX-5代,PCB天线底座
- LuoguP3615 如厕计划
题面 现有两个厕所,一个女士专用,一个通用,给出\(2*n\)个排成一列的人的性别 每人如厕需要一分钟,假如女厕是空的,女生中最靠前的可以直接进入. 需要通过调换顺序使得所有人都上完厕所最后的时间为n ...
- 11张图和源码带你解析Spring Bean的生命周期，建议收藏~!
在网上已经有跟多Bean的生命周期的博客,但是很多都是基于比较老的版本了,最近把整个流程画成了一个流程图.待会儿使用流程图,说明以及代码的形式来说明整个声明周期的流程.注意因为代码比较多,这里的流程图 ...
- Ideas and Tricks Part II
33.对于统计答案幂次的技巧 对于$x^k$,考虑其组合意义:将$k$个不同球放到$x$个不同的盒子里的方案数,直接维护不好维护,那么考虑枚举把这些球放到了哪些盒子里,最后乘上第二类斯特林数和对于的阶 ...