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
<button name="loading" id="1" type="button" class="more">点击加载更多评论</button><!-- 这里的ID1表示当前是第一页 --> <img id="loading" src="/images/loading.gif" />
虽然很代码写得很猥琐,我不太熟JQ,有的方法根本都不知道,如果知道了估计更简单,就不用那么猥琐了,不过不管怎么样功能还是实现了嘛,这种是不需要.AJAX请求返回JSON数据的方法。如果有什么不明白的地方,可以回复给我。
效果图: