这些天我在做FYS模板的时候发现评论ajax这个确实存在了很大的问题，之前我是参考的大前端的ajax 谁知道前几天我发现有这个BUG的时候还以为是我写法的问题，然后我就研究了1天多发现现在很多emlog大前端主题都会有这个BUG。然后我所幸就不在看他们的，然后本来想研究下FLY的，他的也是有一种规律并不怎么是ajax，第一下回复是无刷新，第二下回复就刷新了网页！
在我精心的翻阅各种资料的时候终于找到了解决方法
详细过程我就不多说了，我直接贴出的我Js 直接参考对照修改即可，小白就别瞎折腾了！
代码语言：javascript复制function postcomment() {
var posterflag = false;
if (posterflag) return;
posterflag = true
var a = $("#commentform").serialize();
$(".comment_info").html('<img src="' jsui.uri '/images/loading.gif">');
var comment_url = blog_url 'index.php?action=addcom';
$.ajax({
type: 'POST',
url: comment_url,
data: a,
success: function (a) {
posterflag = false;
//评论失败：您提交评论的速度太快了，请稍后再发表评论
var c = /<div class="main">[rn]*<p>(.*?)</p>/i;
c.test(a) ? ($(".comment_info").html(a.match(c)[1]).show().fadeIn(2500)) : (c = $("input[name=pid]").val(), cancelReply(), $("[name=comment]").val(""), $(".commentlist").html($(a).find(".commentlist").html()), 0 != c ? (a = window.opera ? "CSS1Compat" == document.compatMode ? $("html") : $("body") : $("html,body"), a.animate({
scrollTop: $("#comment-" c).offset().top - 250
}, "normal", function () {
$(".comment_info").html("Ctrl Enter快速提交").fadeIn(2500);
})) : (a = window.opera ? "CSS1Compat" == document.compatMode ? $("html") : $("body") : $("html,body"), a.animate({
scrollTop: $(".commentlist").offset().top - 250
}, "normal", function () {
$(".comment_info").html("Ctrl Enter快速提交").fadeIn(2500);
})));
var imgcode = $(".c_code");
imgcode.click();
pjax_done();
}
})
posterflag = false;
return !1
}
pjax_done()
if (document.body.offsetWidth >= 600 && jsui.is_pjax == 1) {
require(['pjax'], function (pjax) {
$(document).pjax('a[target!=_blank]', '.pjax', {fragment: '.pjax', timeout: 8000});
$(document).on('submit', 'form', function (event) {
$.pjax.submit(event, '.content-wrap', {
fragment: '.content-wrap',
timeout: 6000
})
});
$(document).on('pjax:send', function () { //pjax链接点击后显示加载动画；
$(".pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function () { //pjax链接加载完成后隐藏加载动画；
$(".pjax_loading").css("display", "none");
pjax_done();
if ($(".article-title").length) {
$(".container")["addClass"]("single");
} else {
$(".container")["removeClass"]("single")
}
if ($(".user-main").length || $("#setting").length) {
$(".sidebar").css("display", "none");
} else {
$(".sidebar").css("display", "block");
}
if ($(".focusbox-wrapper").length) {
$(".focusbox-wrapper").css("display", "none");
}
})
});
}下面两种均为转载杨小杰博客
方法一：需要修改源代码
1.includelibfunction.base.php中
"function show_404_page()"函数上方添加函数：
代码语言：javascript复制/**
* 显示json信息
*
* @param string $msg 信息
*/
function myJson($msg) {
echo $msg;
exit;
}代码语言：javascript复制2.includecontrollercomment_controller.php中
if($Comment_Model->isLogCanComment($blogId) === false) {
//emMsg('评论失败：该文章已关闭评论');
myJson(json_encode(array("status"=>"1")));
} elseif ($Comment_Model->isCommentExist($blogId, $name, $content) === true) {
//emMsg('评论失败：已存在相同内容评论');
myJson(json_encode(array("status"=>"2")));
} elseif (ROLE == ROLE_VISITOR && $Comment_Model->isCommentTooFast() === true) {
//emMsg('评论失败：您提交评论的速度太快了，请稍后再发表评论');
myJson(json_encode(array("status"=>"3")));
} elseif (empty($name)) {
//emMsg('评论失败：请填写姓名');
myJson(json_encode(array("status"=>"4")));
} elseif (strlen($name) > 20) {
//emMsg('评论失败：姓名不符合规范');
myJson(json_encode(array("status"=>"5")));
} elseif ($mail != '' && !checkMail($mail)) {
//emMsg('评论失败：邮件地址不符合规范');
myJson(json_encode(array("status"=>"6")));
} elseif (ISLOGIN == false && $Comment_Model->isNameAndMailValid($name, $mail) === false) {
//emMsg('评论失败：禁止使用管理员昵称或邮箱评论');
myJson(json_encode(array("status"=>"7")));
} elseif (!empty($url) && preg_match("/^(http|https)://[^<>'"]*$/", $url) == false) {
//emMsg('评论失败：主页地址不符合规范','javascript:history.back(-1);');
myJson(json_encode(array("status"=>"8")));
} elseif (empty($content)) {
//emMsg('评论失败：请填写评论内容');
myJson(json_encode(array("status"=>"9")));
} elseif (strlen($content) > 8000) {
//emMsg('评论失败：内容不符合规范');
myJson(json_encode(array("status"=>"10")));
} elseif (ROLE == ROLE_VISITOR && Option::get('comment_needchinese') == 'y' && !preg_match('/[x{4e00}-x{9fa5}]/iu', $content)) {
//emMsg('评论失败：评论内容需包含中文');
myJson(json_encode(array("status"=>"11")));
} elseif (ISLOGIN == false && Option::get('comment_code') == 'y' && session_start() && $imgcode != $_SESSION['code']) {
//emMsg('评论失败：验证码错误');
myJson(json_encode(array("status"=>"12")));
} else {
$_SESSION['code'] = null;
$Comment_Model->addComment($name, $content, $mail, $url, $imgcode, $blogId, $pid);
}3.includemodelcomment_model.php中
emDirect(Url::log(blogId).'#'.cid);替换为：
代码语言：javascript复制myJson(json_encode(array("status"=>"13","url"=>Url::log($blogId))));emMsg('评论发表成功，请等待管理员审核', Url::log($blogId));替换为：
代码语言：javascript复制myJson(json_encode(array("status"=>"14","url"=>Url::log($blogId))));4.前端代码核心部分示例
代码语言：javascript复制var data={
comname: $("#comname").val(),
comment: $("#comment").val(),
commail: $("#commail").val(),
comurl: $("#comurl").val(),
imgcode: $("input[name=imgcode]").val(),
gid: $("#comment-gid").val(),
pid: $("#comment-pid").val()
};
$.ajax({
url: 'index.php?action=addcom',
type: 'post',
dataType: 'json',
data: data,
success: function(data){
var tip = $("#commentTips");
switch(data.status){
case "1":
tip.text("主人已关闭此篇文章的评论功能啦！");
break;
case "2":
tip.text("已存在相同内容评论啦！");
break;
case "3":
tip.text("您提交评论的速度太快了，请稍后再发表评论吧！");
break;
case "4":
tip.text("请填写昵称哦！");
break;
case "5":
tip.text("昵称不超过6个汉字或者20个字符哦！");
break;
case "6":
tip.text("请填写正确的邮件地址哦！");
break;
case "7":
tip.text("不能使用管理员昵称或邮箱评论哦！");
break;
case "8":
tip.text("主页地址不符合规范哦！");
break;
case "9":
tip.text("请填写评论内容哦！");
break;
case "10":
tip.text("评论内容超出最大字数限制了哦！");
break;
case "11":
tip.text("评论内容需包含中文哦！");
break;
case "12":
tip.text("验证码不对哒！");
break;
case "13":
alert("评论发表成功！");
location.reload();
break;
case "14":
alert("评论发表成功，请等待管理员审核吧！");
location.reload();
break;
}
}
});方法二：使用正则式（效果见杨小杰博客评论系统）
直接上关键的js代码如下：
代码语言：javascript复制$("#comment_submit").click(function(event){
event.preventDefault();
doSubmitComment();
});
function doSubmitComment(){
var comname = $.trim( $("#commentform input[name=comname]").val() ),
commail = $.trim( $("#commentform input[name=commail]").val() ),
comurl = $.trim( $("#commentform input[name=comurl]").val() ),
comment = $.trim( $("#commentform textarea[name=comment]").val() ),
imgcode = $.trim( $("#commentform input[name=imgcode]").val() ),
tip = $("#commentTips"),
btn = $("#comment_submit");
if(($("#commentform input[name=comname]").length>0) && !comname){
tip.html("请填写您的昵称！");
}else if(($("#commentform input[name=commail]").length>0) && !commail){
tip.html("请填写您的邮箱！");
}else if(($("#commentform input[name=commail]").length>0) && !( /^w ([- .']w )*@w ([-.]w )*.w ([-.]w )*$/.test(commail) ) ){
tip.html("请填写正确的邮箱！");
}else if(!comment){
tip.html("请填写评论内容！");
}else if(($("#commentform input[name=imgcode]").length>0) && !imgcode){
tip.html("请填写验证码！");
}else{
$.ajax({
url: $("#commentform").attr('action'),
type: 'post',
data: $("#commentform").serialize(),
cache: false,
async:false,
beforeSend: function(){
tip.html("提交中...");
btn.attr("disabled",true);
},
success: function(res){
btn.attr("disabled",false);
var pattern = /<div class="main">[rn] <p>(.*?)</p>/;
if(pattern.test(res)) {
res = res.match(pattern);
tip.html(res[1]);
}else{
window.location.href = window.location.href.split("#")[0];
}
},error: function(){
btn.attr("disabled",false);
}
});
};
};小杰是参考第二种办法进行的ajax评论提交修改的，其中也遇到很多问题，下面罗列一下
1、myJson函数返回的是json格式的代码，但是ajax还是识别不了
答：因为json需要header头设置为json编码，所以myJson函数还需要加一个
代码语言：javascript复制header('Content-type: application/json');才能被ajax识别
2、<input type="submit">按钮提交form表单会跳转的问题
答：这个我也是脑子烧了，最后只需要把<input type="submit">按钮换成<button type="button"></button按钮即可。
3、关于安装反评论等插件，返回格式不同
答：这类插件使用的也是emMsg函数返回提示信息，所以只需要换成myJson函数即可。
4、关于重复提交问题
答：因为原版js没有加同步操作，所以只需要在ajax操作中加入async:false同步操作即可，本文已加
上面就是小杰在替换ajax评论提交时遇到的一些复杂问题。
