前言
系列文章:
相关文章:
阅读前须知:以下内容对于实现了pjax效果的站点,可能需要自行增加回调函数。
以下内容完全适用于实现了instantclick站点
标有(*)内容为可选内容,可略去不读
如有疑问可以发送邮件或者直接评论,千万不要加我QQ提问
代码分析
ajax的基础知识
这里使用的是jQuery ajax的底层的一个方法:$.ajax(),执行这个方法的时候,会返回一个创建的XMLHttpRequest对象。
基本语法:$.ajax({
url: ,//发送请求的地址
type: ,//请求方式,是post还是get请求
data: ,//要发送到服务器的数据
error: function() {
//请求失败执行的回调函数
},
success: function(data) {
//请求成功执行的回调函数,参数data是请求成功后的页面的纯文本 HTML 代码
}
})
实现步骤监听comment_form评论框的提交事件:$(comment_form).submit(function() {
//提交事件
})(*) 检查评论内容以及作者邮箱内容是否符合规则(预检):
这段代码比较简单易懂,不再赘述,直接看代码就行了。发起ajax请求:
就是最基础的$.ajax() 请求:$.ajax({
url: $(this).attr('action'),//提交表form的action属性
type: $(this).attr('method'),//提交表form的method属性
data: $(this).serializeArray(),//要发送到服务器的数据
error: function() {
//这里写一下提示信息代码即可
},
success: function(data) {
//这部分内容在第四步中会解释
}
})
获取到ajax请求的数据,从这些数据中找到最新评论的内容,并把该内容插入到当前页面中:
如何从ajax成功返回的数据中找到最新评论,我有两个思路:从ajax请求成功返回的数据中寻找到最新的评论插入到当前页面中。
直接在提交的时候,拿一个变量把用户提交的内容保存起来,然后,直接按照你的评论结构组装成一条评论插入到当前页面中
我是第一种方法,所以以下代码分析均只适用与第一种方法。第一个问题:理解ajax请求成功后返回的数据是什么东西?
返回的数据是执行提交操作后页面的html代码,换句话说,返回的数据(data)就相当于手动刷新当前页面后的html代码
所以,在返回的数据里面,肯定是可以找到最新评论的!第二个问题:如何找到最新评论的内容和应该插入到什么位置?
首先你得保证你的评论将较新的的评论显示在前面。
其次,我把用户评论简单分成两种:母评论(parent):直接评论文章的
子评论(children):评论文章中的某条评论
我们先来看如何找到最新评论的内容:
其实很简单:typecho生成commentID的时候总是越来越大的,所以只要找到数据中最大的那个commentID就是用户刚才评论的最新评论了!
代码就是:new_id = $(comment_list, data).html().match(/id=\"?comment-\d+/g).join().match(/\d+/g).sort(function(a, b) {
return a - b
}).pop();
但是其实还是存在一个问题的:如果你启用了评论分页功能,由于typecho显示最新评论总是在第一页,所以当用户不在第一页发出了母评论,那么从数据(data)中找到的ID最大的评论并不是最新评论,
这个时候,发送ajax请求成功后,就没必要向当前页面插入评论,因为最新评论再第一页。if ($('.page-navigator .prev').length && parent_id == ""){
new_id = '';
}//做一个判断
...
if (new_id)//new_id不为空的时候才会插入
$('#' + parent_id + " .comment-children .comment-list").prepend(data);
接下来就是插入的位置问题:
其实很简单,如果是母评论,直接插入到comment_list的最前面即可:$(comment_list).prepend(data);
如果是子评论,要在监听页面中的回复链接,当鼠标点击回复按钮的时候,通过父元素的父元素(根据个人的评论结构而定),找到回复当前的评论ID(parentID):$(comment_reply + ' a').click(function() { // 回复
parent_id = $(this).parent().parent().parent().parent().attr("id");
$(textarea).focus();
});
$('#cancel-comment-reply-link').click(function() { // 取消
parent_id = '';
});
插入的位置就是回复当前评论的最前面就行了:if (parent_id) {
data = $('#comment-' + new_id, data).hide(); // 取新评论
if ($('#' + parent_id).find(".comment-children").length <= 0) {
$('#' + parent_id).append("
}
if (new_id) //new_id不为空的时候才会插入
$('#' + parent_id + " .comment-children .comment-list").prepend(data);
//console.log('该评论为子评论,parent_id:' + parent_id);
parent_id = '';
//console.log(data);
}
代码分析到这里就结束了!
handsome主题已经内置该部分代码,并且做了优化,在外观设置——高级设置中启用即可。
代码下载
需要的小伙伴直接下载代码,因为每个主题的评论结构有所不同,需要自行修改后才能使用。