自己用纯jquery写的一个ajax无限加载分页 - PHP

JQUERY

$(function(){
 
//加载评论\\
$('#loading').hide();//隐藏加载时图片
if('{$page_count}'==1){$('.more').hide();}//如果只有1页则隐藏加载按钮,{$page_count}=总页数
 
//开始点击加载按钮  
$(".more").click(function(){
$.ajaxSetup ({cache: false});//关闭ajax缓存,每次调用load方法前要调用一下这个方法才不加载缓存!
var page = $(this).attr("id");//获取当前页id，就是HTML提供的id做的个hack
var nextpage = page*1+1;//获取下一页的页码
$(this).before('<div class="hack cool'+nextpage+'"></div>');//每点击一次加载按钮，则添加一次hack容器来装取回来的内容，这里是关键!
$(this).attr("id",nextpage);//每按一次加载按钮,则把id设置成下一页的页码
$('.more,.say').hide();//正在加载时隐藏评论和加载按钮
$('#loading').show();//正在加载时显示加载图片
$(".cool"+nextpage).load('/News/comment/aid/{$Think.get.aid}/page/'+nextpage,function(){
$('.more,.say').show();//成功后显示加载按钮和评论按钮
$('#loading').hide();//成功后隐藏加载图片
if(nextpage=='{$page_count}'){$(".more").remove(); $(".say").before('<button class="more" style="background:#F0F0F0;"><span class="glyphicon glyphicon-ban-circle"></span>已全部加载!</button>');}//如果加载到最大页数则隐藏加载按钮,添加加载完毕提示
    });
});
 
});

HTML

1 2	`<button` `name="loading"` `id="1"` `type="button"` `class="more">点击加载更多评论</button><!-- 这里的ID1表示当前是第一页 -->` `<img` `id="loading"` `src="/images/loading.gif"` `/>`

虽然很代码写得很猥琐，我不太熟JQ，有的方法根本都不知道，如果知道了估计更简单，就不用那么猥琐了，不过不管怎么样功能还是实现了嘛，这种是不需要.AJAX请求返回JSON数据的方法。如果有什么不明白的地方，可以回复给我。

效果图：

伍珩's blog

推荐自己用纯jquery写的一个ajax无限加载分页