ZigZagK的博客 - 2019年6月
type: channel
link: https://zigzagk.top/2019/06/
description: Never give up fighting!
items: 在PJAX的基础上使用AJAX评论等功能

在PJAX的基础上使用AJAX评论等功能
type: item
date: 2019-06-07T01:23:00+08:00
description: 终于把AJAX评论搞好了QwQ，效果可以在这篇文章下面评论试试（所以在本页可以随意划水2333333）。AJAX评论方法1：AJAX提交评论2020.2.16 UPD：过了这么久我总算有了一点长进QAQ，现在已经基本明白了这种方法的原理。由于此方法兼容性比较好（比如不影响评论过滤插件）而且写起来更方便，所以在主题重构的时候改用了这种方式。膜拜dalao友人C：typecho博客实现ajax评论其实只要对form表单提交和ajax有个大致的了解，上面这篇文章看起来就通俗易懂了QAQ。1.关闭反垃圾保护和来源页检测这两个功能与PJAX以及AJAX评论有冲突，需要关闭（应该是有办法支持的，不过这两个功能其实没啥用，所以关了也没事）。可以在functions.php的themeInit函数中加上两句话：function themeInit($archive){ Helper::options()->commentsAntiSpam=false; //关闭评论反垃圾 Helper::options()->commentsCheckReferer=false; //关闭检查评论来源页URL是否与文章链接一致 }这样就不用手动设置了。2.改用AJAX提交评论首先需要阻止原先的提交，改用AJAX来提交评论。//#comment-form是提交评论的form $('#comment-form').submit(function(event){ var commentdata=$(this).serializeArray(); //serializeArray()可以获取到表单数据 $.ajax({ url:$(this).attr('action'), //表单的提交链接 type:$(this).attr('method'), //表单的提交方式(post) data:commentdata, //需要提交的数据 beforeSend:function(){}, //AJAX提交前 error:function(){}, //AJAX提交失败 success:function(data){} //AJAX提交成功 }); return false; //阻止原先提交 });如果AJAX提交成功，在success中会返回一个data，它是提交成功之后跳转到的页面的HTML代码。3.提交失败时的错误信息提交失败分为两种：1.AJAX提交失败（比如你没网了🙃）。2.AJAX提交成功，但是被typecho拒绝（比如评论为空）。第二种情况下，data将会返回类似这样的内容： Error 必须填写评论内容 比较有标志性的内容是 Error ，我们可以通过检测这个字符串是否存在来区分评论提交成功或失败。然后用正则表达式获取到 中的错误信息就行了。var error=/ Error<\/title>/; if (error.test(data)){ //如果存在 Error var text=data.match(/<div(.*?)>(.*?)<\/div>/is); //text[0]是匹配结果，text[1]是第一个(.*?)，text[2]是第二个(.*?) var str='发生了未知错误';if (text!=null) str=text[2]; mdui.alert(str,'评论失败'); //mdui的提示框 }4.获取新的评论列表如果在3中没有出现 Error ，说明评论提交成功了，这时候data将会返回手动刷新页面之后的HTML代码，现在要做的就是将提交后的评论显示出来。一种方法是手动将这条评论插入，不过还要考虑页数变化等一系列问题所以很麻烦。还有一种方法是发起pjax请求重载页面（会打断音乐播放）。这里提出另一种傻瓜式方法：既然有了HTML代码，我们可以直接把评论列表给替换掉，很多问题就能简单的解决了！首先先在评论列表和评论分页的外部套上一层 ： <?php $comments->listComments(); ?> <?php if ($comments->have()){ ?> <?php $comments->pageNav('','',2,'···',array('wrapTag' => 'div','wrapClass' => 'page-navigator mdui-text-center','itemTag' => 'div','currentClass' => 'current')); ?> <?php } ?> 然后就可以在提交成功之后直接将#commentcontent中的内容替换掉：$('#commentcontent').html($('#commentcontent',data).html()); //$…