PHP+Ajax点击加载更多内容 -效果好,速度快,带图片加载和跳转链接
修复其他 图片加载 显示乱码,其他基础改动点击加载数据 最后 加载更多变成 没记录
一、HTML部分
<style type="text/css"> .get_more{ margin:10px auto 20px; text-align:center; display:block; width:120px; height:40px; line-height:40px; border:1px solid #000000; color:#000000; background:#f1f0ef;transition:all 0.5s} .more_loader_spinner{width:20px; height:20px; margin:10px auto;background: url(templates/default/images/loader.gif) no-repeat; } </style>
二、引入jQuery插件和jquery.more.js加载更多插件
<script type="text/javascript" src="templates/default/js/jquery.more.js"></script>
<script type="text/javascript">
$(function(){
$('#more').more({
'address': 'data.php',
'amount' : '4'
})
});
</script>
四、data.php ,Util.class.php
data.php接收前台页面提交过来的两个参数,
POST[′last′]即开始记录数,
_POST[‘amount’]即单次显示记录数,看SQL语句就明白,其实就是分页中用到的语句。
引入 Util.class.php//$doUtil 中文乱码json转化类
$cid = empty($cid) ? 0 : intval($cid);
$sayList=array();
if(!empty($keyword))
{
$keyword = htmlspecialchars($keyword);
$sql = "SELECT * FROM `#@__infolist` WHERE (classid=$cid OR parentstr LIKE '%,$cid,%') AND title LIKE '%$keyword%' AND delstate='' AND checkinfo=true ORDER BY orderid DESC limit $last,$amount";
}
else
{
if ($cid ==0 ){
$sql = "SELECT * FROM `#@__infolist` WHERE delstate='' AND checkinfo=true ORDER BY id asc limit $last,$amount";
}
else{
$sql = "SELECT * FROM `#@__infolist` WHERE (classid=$cid OR parentstr LIKE '%,$cid,%') AND delstate='' AND checkinfo=true ORDER BY id asc limit $last,$amount";
}
}
$dosql->Execute($sql);
while($row = $dosql->GetArray())
{
if($row['linkurl']=='' and $cfg_isreurl!='Y')
$gourl = 'newsshow.php?cid='.$row['classid'].'&id='.$row['id'];
else if($cfg_isreurl=='Y')
$gourl = 'newsshow-'.$row['classid'].'-'.$row['id'].'-1.html';
else
$gourl = $row['linkurl'];
//获取缩略图地址
if($row['picurl']!='')
$picurl = $row['picurl'];
else
$picurl = 'templates/default/images/nofoundpic.gif';
$sayList[] = array(
'morecontent'=>'<a href="'.$gourl.'"><div class="img"><sup>'.GetDateMk2($row['posttime']).'</sup><img src="'.$picurl.'"/></div><div class="txt"><h2>'.ReStrLen($row['title'],36).'</h2><h4>'.ReStrLen($row['description'],60).'</h4></div><div class="link">>></div></a>');
}
echo $doUtil->json_encode($sayList);//$doUtil 中文乱码json转化类
Util.class.php
$doUtil = new Util();
class Util
{
static function json_encode($input){
// 从 PHP 5.4.0 起, 增加了这个选项.
if(defined('JSON_UNESCAPED_UNICODE')){
return json_encode($input, JSON_UNESCAPED_UNICODE);
}
if(is_string($input)){
$text = $input;
$text = str_replace('\\', '\\\\', $text);
$text = str_replace(
array("\r", "\n", "\t", "\""),
array('\r', '\n', '\t', '\\"'),
$text);
return '"' . $text . '"';
}else if(is_array($input) || is_object($input)){
$arr = array();
$is_obj = is_object($input) || (array_keys($input) !== range(0, count($input) - 1));
foreach($input as $k=>$v){
if($is_obj){
$arr[] = self::json_encode($k) . ':' . self::json_encode($v);
}else{
$arr[] = self::json_encode($v);
}
}
if($is_obj){
return '{' . join(',', $arr) . '}';
}else{
return '[' . join(',', $arr) . ']';
}
}else{
return $input . '';
}
}
}
五、jquery.more.js相关API
参数 描述 默认值
amount 每次显示记录数 10
address 请求后台的地址 -
format 数据传输格式 json
template html记录DIV的class属性 .single_item -
trigger 触发加载更多记录的class属性 .get_more -
scroll 是否支持滚动触发加载 false
offset 滚动触发加载时的偏移量 100
调试修复关于图片和点击在家最后数据提示文字数据 jquery.more.js
(function( $ ){
var target = null;
var template = null;
var lock = false;
var variables = {
'last' : 0
}
var settings = {
'amount' : '4',
'address' : 'data.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'){
// console.log('点击more加载开始');
$(this).find(settings.trigger).bind('click.more',methods.get_data);
// console.log('点击more加载结束');
// console.log('触发第一次默认data.php自动加载数据载开始');
$(this).more('get_data');
// console.log('触发第一次默认data.php自动加载数据载结束');
}
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')
console.log('adding elements');
var root = target
// alert(root.attr('id'))
console.log('root.attr(id):'+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('12341234')
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');
console.log('getting data');
var ile;
lock = true;
//console.log(event.target.nodeName);
target.children(".more_loader_spinner").css('display','block');
$(settings.trigger).css('display','none');
//alert(arguments[0]);
if(typeof(arguments[0]) == 'number'){
console.log('arguments[0] true');
ile=arguments[0];
}
else {
console.log('arguments[0] false');
console.log('ile:'+ile);
ile = settings.amount;
console.log('ile:'+ile);
}
$.post(settings.address, {
last : variables.last,
amount : ile
}, function(data){
console.log('data:'+data);
if($.isEmptyObject(data)){
// console.log('data:为空没有啦');
// $(settings.trigger).text('已经到底啦!');
$(settings.trigger).css('display','block');
target.children('.more_loader_spinner').css('display','none');
}
else{
$(settings.trigger).css('display','block')
//console.log($(settings.trigger).css);
//$.each(data, function(key, val) {
// console.log(data[key]);//可以输出姓名
// });
//console.log('lock:'+lock);
//console.log('add_elements开始加载执行');
methods.add_elements(data)
// console.log('add_elements执行结束');
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)
修复参考源于helloweba.com并保留原文链接:http://www.helloweba.com/view-blog-130.html
打包下载地址下载 :http://download.csdn.net/detail/zxfzxfzxf12345/9901516
或者留言联系