emlog评论ajax提交的几种方法

  • 内容
  • 相关

这些天我在做FYS模板的时候发现评论ajax这个确实存在了很大的问题,之前我是参考的大前端的ajax 谁知道前几天我发现有这个BUG的时候还以为是我写法的问题,然后我就研究了1天多发现现在很多emlog大前端主题都会有这个BUG。然后我所幸就不在看他们的,然后本来想研究下FLY的,他的也是有一种规律并不怎么是ajax,第一下回复是无刷新,第二下回复就刷新了网页!

在我精心的翻阅各种资料的时候终于找到了解决方法

详细过程我就不多说了,我直接贴出的我Js 直接参考对照修改即可,小白就别瞎折腾了!

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\">[\r\n]*<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.\include\lib\function.base.php中

"function show_404_page()"函数上方添加函数:

/**
 * 显示json信息
 *
 * @param string $msg 信息
 */
function myJson($msg) {
 echo $msg;
 exit;
}

 2.\include\controller\comment_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.\include\model\comment_model.php中

emDirect(Url::log($blogId).'#'.$cid);替换为:

myJson(json_encode(array("status"=>"13","url"=>Url::log($blogId))));

emMsg('评论发表成功,请等待管理员审核', Url::log($blogId));替换为:

myJson(json_encode(array("status"=>"14","url"=>Url::log($blogId))));

 4.前端代码核心部分示例

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;
 }
 }
});

 5.代码托管于GitHub,地址:emlogCommentAjax

方法二:使用正则式(效果见杨小杰博客评论系统)

直接上关键的js代码如下:

$("#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">[\r\n]+<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函数还需要加一个

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评论提交时遇到的一些复杂问题。

本文标签:

版权声明:若无特殊注明,本文皆为《会飞的鱼》原创,转载请保留文章出处。

本文链接:emlog评论ajax提交的几种方法 - https://f162.cn/post/314

发表评论

电子邮件地址不会被公开。 必填项已用*标注

未显示?请点击刷新

允许邮件通知

评论

2条评论
  1. avatar

    黯然。Poison Lv.1 Internet Explorer 11.0 Internet Explorer 11.0 Windows 8.1 x64 Edition Windows 8.1 x64 Edition 回复

    啦啦啦

    广东省广州市海珠区 腾讯云服务器(广州市海珠区新港中路397号TIT创意园)

    1. avatar

      七彩网络 Lv.4 Chrome 63.0.3239.26 Chrome 63.0.3239.26 Windows 7 x64 Edition Windows 7 x64 Edition 回复

      学到老,活到老

      浙江省宁波市 移动