首页 > 学习笔记 > Emlog实现Ajax无刷新发表评论
2011
12-07

Emlog实现Ajax无刷新发表评论

1.打开博客根目录,找到index.php,用支持utf-8编码的编辑器(本人喜欢用notepad2),找到

$cheackimg = $comment_code == 'y' ? "<img src=\"".BLOG_URL."lib/checkcode.php\" align=\"absmiddle\" /><input name=\"imgcode\"  type=\"text\" class=\"input\" size=\"5\">" : '';
修改为

$cheackimg = $comment_code == 'y' ? "<img src=\"".BLOG_URL."lib/checkcode.php\" align=\"absmiddle\" id=\"checkcode\" /><input type=\"text\" name=\"imgcode\" id=\"comimgcode\"  size=\"5\"&nbsp; class=\"input\" />" : '';

其实就是添加了两个id,一个是img的id为checkcode,输入框的id为comimgcode,如果你的评论未开启验证码,可以不修改。

2.将附件中的ajax_comment.js放在适当的位置并在模板的header.php中引入,注意,该js同时需要jquery 库,emlog自带其1.2.6版本,已经足够,本人将ajax_comment.js放在我正在使用的模板的js目录下,则在header.php中

<script src="<?php echo BLOG_URL; ?>lib/js/common_tpl.js" type="text/javascript"></script>

下添加

<script src="<?php echo BLOG_URL; ?>lib/js/jquery/jquery-1.2.6.js" type="text/javascript"></script>
<script src="<?php echo TEMPLATE_URL; ?>js/ajax_comment.js" type="text/javascript"></script>

3.打开模板的module.php,修改里面的发表评论的函数(本例实在自带模版中做的修改,红色部分为增加或修改部分的,必须一样,请在自己的模版中做相应修改)如下:

<?php
//blog:发表评论表单
function blog_comments_post(){
    global $logid,$ckname,$ckmail,$ckurl,$cheackimg,$allow_remark; ?>
    <?php if($allow_remark == 'y'): ?>
    <p class="comment"><b>发表评论:</b><a name="comment"></a></p>
    <div class="comment_post">
    <form method="post"  name="commentform" action="<?php echo BLOG_URL; ?>index.php?action=addcom" id="commentform">
    <p>
    <input type="hidden" name="gid" value="<?php echo $logid; ?>"  size="22" tabindex="1" id="gid" />
    <input type="text" name="comname" maxlength="49" value="<?php echo $ckname; ?>"  size="22" tabindex="1" id="comname" >
    <label for="author"><small>昵称</small></label></p>
    <p>
    <input type="text" name="commail"  maxlength="128"  value="<?php echo $ckmail; ?>" size="22" tabindex="2" id="commail" >
    <label for="email"><small>邮件地址 (选填)</small></label></p>
    <p><input type="text" name="comurl" maxlength="128"  value="<?php echo $ckurl; ?>" size="22" tabindex="3" id="comurl" >
    <label for="url"><small>个人主页 (选填)</small></label>
    </p>
    <p><textarea name="comment" id="comment"   rows="10" tabindex="4"></textarea></p>
    <p><div class="comment_yz"><?php echo $cheackimg; ?><input type="button"
  id="comment_submit"   value="发表评论"  onclick="submitComment()"   /></div></p>
    </form>
    </div>
    <?php endif; ?>
<?php }?>

源代码

<?php
//blog:发表评论表单
function blog_comments_post(){
    global $logid,$ckname,$ckmail,$ckurl,$cheackimg,$allow_remark; ?>
    <?php if($allow_remark == 'y'): ?>
    <p class="comment"><b>发表评论:</b><a name="comment"></a></p>
    <div class="comment_post">
    <form method="post"  name="commentform" action="<?php echo BLOG_URL; ?>index.php?action=addcom" id="commentform">
    <p>
    <input type="hidden" name="gid" value="<?php echo $logid; ?>"  size="22" tabindex="1" id="gid" />
    <input type="text" name="comname" maxlength="49" value="<?php echo $ckname; ?>"  size="22" tabindex="1" id="comname" >
    <label for="author"><small>昵称</small></label></p>
    <p>
    <input type="text" name="commail"  maxlength="128"  value="<?php echo $ckmail; ?>" size="22" tabindex="2" id="commail" >
    <label for="email"><small>邮件地址 (选填)</small></label></p>
    <p><input type="text" name="comurl" maxlength="128"  value="<?php echo $ckurl; ?>" size="22" tabindex="3" id="comurl" >
    <label for="url"><small>个人主页 (选填)</small></label>
    </p>
    <p><textarea name="comment" id="comment"  rows="10" tabindex="4"></textarea></p>
    <p><div class="comment_yz"><?php echo $cheackimg; ?><input type="button"
  id="comment_submit"  value="发表评论"  onclick="submitComment()"  /></div></p>
    </form>
    </div>
    <?php endif; ?>
<?php }?>

4. 在module.php中找到显示评论部分,在

<div id="com_line">

之后添加

<div id="ooxx"></div>

好了,如果你的博客在根目录,且没有开启评论验证码,到这里应该已经可以看见效果了,以下是博客不在根目录和需要进一步订制发表评论后的显示样式需要修改的的内容,打开附件中ajax_comment.js,直接看下面的注释吧

function submitComment() { //ajax评论函数
	var name = $("#comname").val();
	var mail = $("#commail").val();
	var url = $("#comurl").val();
	var comment = $("#comment").val();
	var gid = $("#gid").val();
	var imgcode=$("#comimgcode").val();
	function checkEmail (str){
	isEmail1=/^\w+([\.\-]\w+)*\@\w+([\.\-]\w+)*\.\w+$/;
	return (isEmail1.test(str));
}
	if($.trim(name) == "") {
		alert("名字不能为空");
		$("#comname").focus();
		return false;
	}
	if(name.length > 16) {
		alert("名字太长");
		$("#comname").focus();
		return false;
	}
	if($.trim(comment) == "") {
		alert("评论内容不能为空");
		$("#comment").focus();
		return false;
	}
	if(comment.length > 2000) {
		alert("评论内容太长");
		$("#comment").focus();
		return false;
	}
	if(mail!= "" && !checkEmail(mail)) {
		alert("邮件地址错误");
		$("#commail").focus();
		return false;
	}
	var querystr = "comment="+encodeURIComponent(comment)
					+"&comname="+encodeURIComponent(name)
					+"&commail="+mail
					+"&comurl="+url
					+"&imgcode="+imgcode
					+"&gid="+gid;
	$.post("/index.php?action=addcom", querystr, function(data){//请根据实际情况修改你的emlog目录,如http://Urdomain/emlog/index.php?action=addcom
		data = $.trim(data);
		var isrespone=/评论发表成功/;
		if(isrespone.test(data)){
		var content = '<div id="com_line"><b>' + name +'</b><div class="time"> 0 秒前</div><div class="com_date">' + comment + '</div></div>';//这里是发表评论成功后显示的代码,即你刚发表的评论显示的样式,具体含义在代码后面说明,注意写成一行。
		//reset_user_reg_check_code();//发表成功后执行刷新验证码,默认没有开启,如果开启,请将reset_user_reg_check_code();前面的“//”去掉
			$("#ooxx").html(content + $("#ooxx").html());
			$("html,body").animate({scrollTop: $("#ooxx").offset().top - 30}, "normal");
			$("#comment").val("");
		}else{
		    var isrespone=/<p>.*<\/p>/;
		    if(isrespone.test(data)) {
		    	var getvar = data.match(/<p>(.*)<\/p>/);
		    	var msg = getvar[1];
		    	alert(msg);
		    }else{
		    	alert("评论发表失败");
		    }
	    }
	});
}

function reset_user_reg_check_code(){ //刷新验证码函数
 var maxNumber = 1000, BlogURL = window.location.protocol + "//" + location.hostname;
 var randomNumber = Math.round(maxNumber * Math.random());
     document.getElementById("checkcode").src = BlogURL + "/lib/checkcode.php?t=" + randomNumber;
 $("#imgcode").val("");
 }

好了,现在是真正的完成了,还有一点瑕疵,就是如果发表的是文章的第一条评论,是不会显示的,只有刷新才能显示,解决办法是在你的模板显示没有评论的地方加上

<div id="ooxx"></div>

 


最后编辑:
作者:六度
这个人很懒什么也没留!~

网友评论(11)

博主貌似没看懂
2016-09-30 20:33   回复
不行啊?
2016-04-06 20:00   回复
@恋夜秀场:这个是以前版本的,最新版的没测试过
2016-04-07 09:56   回复
我是 浙江省台州市 电信
看看效果哦
2016-04-06 11:18   回复
貌似不错
2015-08-16 22:46   回复
帮博主测试
2015-06-19 00:01   回复
e 福建省泉州市 电信
现在还能用吗?
2015-04-22 12:50   回复
@e:你试一下吧,发表的时候可以用,现在不知道还能用吗。
2015-04-23 15:01   回复
路过
2015-01-11 02:30   回复
@蓝叶:进来喝杯茶
2015-01-12 11:31   回复
帮助博主测试一下哈
2014-09-23 23:11   回复
发布评论

表情
需要勾选我,才能再发表评论