相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲解。在这想跟大家分享下。AJAX加载文章的内容。当然，这里还是基于JQ的load方法来实现。OK，来看效果：
首先，定义三个变量：
- var objTag= $(".post");//定义要获取内容所在的节点
- var num= objTag.length;//定义节点的数量
- var _cache=new Object;//建立一个缓存对像
然后构建一个加载的函数：
- function loadentry(n){
- var _url=$(objTag[n]).children(".archive-post-title").children("h2").children("a").attr("href");//定义要加载文章的地址
- $('<div class="details"><div style="width:160px;margin-top:8px;padding:0 2px;font-size:12px;background: #01E343; color:#FFF;">正在加载文章内容，请稍等！</div></div>').insertBefore($(objTag[n]).children(".singledata"));//插入提示信息
- if(_cache[_url]==null){//判断是否有缓存
- $(objTag[n]).children(".details").load(_url+" .post .entry",function(){
- _cache[_url]=$(objTag[n]).children(".details").html();
- $('<span class="archive-arrow"><span title="收起全文" class="hide fRight" onclick="closentry("'+n+'");">收起全文↑</span></span>').insertAfter($(objTag[n]).children(".details"));
- });//加载文章内容
- }else{
- $(objTag[n]).children(".archive-post-title").children(".archive-arrow").remove();
- $(objTag[n]).children(".details").html(_cache[_url]);//直接显示缓存对像的内容
- $('<span class="archive-arrow"><span title="收起全文" class="hide fRight" onclick="closentry("'+n+'");">收起全文↑</span></span>').insertAfter($(objTag[n]).children(".details"));
- }
- $(objTag[n]).children(".archive-post-title").children(".archive-arrow").remove();
- }
这部分对于不懂JQ的人来说可能有点复杂。懂JQ的人看起来一定很简单。就是一个对DOM的操作。通过动态的插入清除节点来实现我们需要的效果。关健在于“.load()”的用法。
到这已经实现了加载了。接着需要做个删除也就是收起全文；相比加载，删除要简单的多了，就是直接删除节点就行了。
- function closentry(n){
- $(objTag[n]).children(".details").animate({height: 'toggle'}, "slow",function(){$(this).remove()});
- $(objTag[n]).children(".archive-arrow").remove();
- $('<div class="archive-arrow"><span title="阅读全文" class="show" onclick="loadentry("'+n+'");">阅读全文↓</span></div>').insertAfter($(objTag[n]).children(".archive-post-title").children("p"));
- }
这段代码就是一个基本的节点操作。在这就不作说明了；当然，最后我们需要插入节点并绑定事件。
- $(document).ready(function(){
- for(a=0;a<num;a++){
- $(objTag[a]).children(".archive-post-title").children(".archive-arrow").append('<span class="show" title="阅读全文" onclick="loadentry("'+a+'");">阅读全文↓</span>');
- }
- });
OK，到这里这个AJAX加载效果就完成了。详细的效果可以点击侧边栏的分类导航。
2011/07/05
确实不错，我也在用
2010/12/14
试一试效果
2010/09/19
好文章..有点JS和PHP基础但是不会做！
2010/09/05
太帅了
2010/08/27
谢谢分享，我尝试一下
2010/08/01
这个阅读全文功能浏览器兼容性不好。ie8下就不能使用。
2010/07/24
好的 谢谢分享 收藏了！
2010/07/22
额朋友真多。。。
2010/07/22
有点复杂，还是不用吧。要么来个插件。
2010/07/04
学习了,支持！