WordPress中利用AJAX技术进行评论提交的实现示例
一直对WordPress的Ajax交互研究感兴趣，也一直很关注于这方面的技术，谈到WordPressAjax就不得不谈到评论Ajax提交，作为一个博客、论坛评论的Ajax提交不仅可以改善用户体验，还可以大幅缩减服务器开支，毕竟输出单条评论内容比重新组织输出一个页面要简单的多。虽说现在访问量一直比较低，不存在服务器压力的问题，但一向注重用户体验的我，当然不能放弃这么一个提升用户体验的机会。今天抽了一下午的空，把这个主题的Ajax评论提交初步完成了。
直接开门见山，直接上代码：（原理及思路在最后）
根据自己主题不同结构，以下代码请自行调整。
WordPressAjax提交评论PHP代码
在主题function.php文件中加入如下部分。
//以下大部分代码出自yinheli经由该部分代码，排除部分错误、优化精简得出以下代码。
//yinheli博客不做了，所以这里就不给链接了。
//EditedbyXiangZiDEC.17TH2011
functionfail($s){//虚拟错误头部分
header('HTTP/1.0500InternalServerError');
echo$s;
exit;
}
functionajax_post_comment_slow(){
fail('用不用说这么快？想好了再说！');
}
//评论太快输出代码。
add_filter('comment_flood_trigger','ajax_post_comment_slow',0);
//挂一个评论太快，返回内容的钩子
functionajax_comment(){
//Ajaxphp响应部分代码
if($_POST['action']=='ajax_comment'){
global$wpdb,$db_check;
//CheckDB
if(!$wpdb->dbh){
echo('Ourdatabasehasissues.Tryagainlater.');
die();
}
nocache_headers();
$comment_post_ID=(int)$_POST['comment_post_ID'];
$status=$wpdb->get_row("SELECTpost_status,comment_statusFROM$wpdb->postsWHEREID='$comment_post_ID'");
if(empty($status->comment_status)){
//这一套判断貌似抄的wp源代码。详见：include/comment.php
do_action('comment_id_not_found',$comment_post_ID);
fail('Thepostyouaretryingtocommentondoesnotcurrentlyexistinthedatabase.');
}elseif('closed'==$status->comment_status){
do_action('comment_closed',$comment_post_ID);;
fail('Sorry,commentsareclosedforthisitem.');
}elseif(in_array($status->post_status,array('draft','pending'))){
do_action('comment_on_draft',$comment_post_ID);
fail('Thepostyouaretryingtocommentonhasnotbeenpublished.');
}
$comment_author=trim(strip_tags($_POST['author']));
$comment_author_email=trim($_POST['email']);
$comment_author_url=trim($_POST['url']);
$comment_content=trim($_POST['comment']);
//Iftheuserisloggedin
$user=wp_get_current_user();
if($user->ID){
$comment_author=$wpdb->escape($user->display_name);
$comment_author_email=$wpdb->escape($user->user_email);
$comment_author_url=$wpdb->escape($user->user_url);
if(current_user_can('unfiltered_html')){
if(wp_create_nonce('unfiltered-html-comment_'.$comment_post_ID)!=$_POST['_wp_unfiltered_html_comment']){
kses_remove_filters();//startwithacleanslate
kses_init_filters();//setupthefilters
}
}
}else{
if(get_option('comment_registration'))
fail('火星人？注册个?');
}
$comment_type='';
if(get_option('require_name_email')&&!$user->ID){
if(6>strlen($comment_author_email)||''==$comment_author)
fail('Oopps,名字[Name]或邮箱[email]不对。');
elseif(!is_email($comment_author_email))
fail('Oopps,邮箱地址[Email]不对。');
}
if(''==$comment_content)
fail('是不是应该写点什么再提交？');
//Simpleduplicatecheck
$dupe="SELECTcomment_IDFROM$wpdb->commentsWHEREcomment_post_ID='$comment_post_ID'AND(comment_author='$comment_author'";
if($comment_author_email)$dupe.="ORcomment_author_email='$comment_author_email'";
$dupe.=")ANDcomment_content='$comment_content'LIMIT1";
if($wpdb->get_var($dupe)){
fail('评论重复了!有木有!');
}
$commentdata=compact('comment_post_ID','comment_author','comment_author_email','comment_author_url','comment_content','comment_type','user_ID');
if(!$user->ID){
$result_set=$wpdb->get_results("SELECTdisplay_name,user_emailFROM$wpdb->usersWHEREdisplay_name='".$comment_author."'ORuser_email='".$comment_author_email."'");
if($result_set){
if($result_set[0]->display_name==$comment_author){
fail('博主你也敢冒充？');
}else{
fail('博主你也敢冒充？');
}
}
}
$comment_id=wp_new_comment($commentdata);
$comment=get_comment($comment_id);
if(!$user->ID){
setcookie('comment_author_'.COOKIEHASH,$comment->comment_author,time()+30000000,COOKIEPATH,COOKIE_DOMAIN);
setcookie('comment_author_email_'.COOKIEHASH,$comment->comment_author_email,time()+30000000,COOKIEPATH,COOKIE_DOMAIN);
setcookie('comment_author_url_'.COOKIEHASH,clean_url($comment->comment_author_url),time()+30000000,COOKIEPATH,COOKIE_DOMAIN);
}
@header('Content-type:'.get_option('html_type').';charset='.get_option('blog_charset'));
xz_comment($comment,null);//这是我的调用评论函数，换成你的函数名。
die();
}
}
add_action('init','ajax_comment');
Javascript中代码
注意：以下代码需要Jquery框架支援。
javascriptonload代码中加入以下部分。
if(jQuery('#commentform').length){
jQuery('#commentform').submit(function(){
//截获提交动作
//ID为commentform的表单提交时发生的函数，也就是整个留言输入框form的ID。
varajaxCommentsURL=window.location.href;
jQuery.ajax({
url:ajaxCommentsURL,
data:jQuery('#commentform').serialize()+'&action=ajax_comment',
type:'POST',
beforeSend:function(){
jQuery('#commenterror').hide();
jQuery('#commentload').fadeIn();
},
error:function(request){//发生错误时
jQuery('#commenterror').html(request.responseText);
jQuery('#commentload').hide();//隐藏submit
jQuery('#commenterror').fadeIn();//显示error
},
success:function(data){
jQuery('textarea').each(function(){
this.value='';
});
jQuery('#commenterror').fadeOut();
if(jQuery(".commentlistli.comment").first().length!=0){jQuery(".commentlistli.comment").first().before(data)}
else{jQuery("ol.commentlist").append(data)}
jQuery(".commentlistli.comment").first().hide(0,function(){$(this).slideDown(1000)});
jQuery('#cmt-submit').attr('disabled',true).css({"background-color":"#6C6C6C","color":"#E0E0E0"});
jQuery('#commentload').fadeOut(1600);
setTimeout(function(){
jQuery('#cmt-submit').removeAttr('disabled').css({"background-color":"#0086C5","color":"#FFFFFF"});
},3000);
}
});
returnfalse;
});
}
注：代码仍有改进需求，因为没有时间，所以就没有再进化。
CSS代码
css随意部分添加。
#commentload,#commenterror{
display:none;
margin:5px000;
color:#D29A04;
float:left;
font-size:16px;
padding:00020px;
}
#commentload{
background:url("img/loading.gif")no-repeatbottomleft;
}
#commenterror{
background:url("img/error.png")no-repeatbottomleft;
}
原理、思路
原理：
Javascript提交数据
php响应并输出结果
Javascript得到结果并显示
思路：
点击提交按钮后，Javascript截获提交动作
截获提交的各项数据（Name、Email、Web、Comment-text）
利用JavascriptJquery模拟浏览器提交POST（Name、Email、Web、Comment-text）请求之WordPress
Function.php文件中构造一个接受请求的函数，即本列中ajax_comment函数
如果请求无错误，输出正确结果
如果请求有错误，输出错误结果
Javascript获得正确结果，动态添加到评论列表中
Javascript获得错误结果，动态添加到提交提示栏
改进
样式方面，我确实没什么美感，所以正在学习中。
提交按钮在点击至获得返回结果后3秒的时间里应该都是变灰失效状态，这一点之前因为在本机测试，提交瞬间完成没有注意到，远程测试的时候发现了，但要改的话还要进行测试，时间太紧就不改了，有机会再改进一下。
总结
因为WordPress主题中评论样式的自由性、多样性，所以貌似至今一直没有一款通用性的AJAX评论插件，
一些高手也只能在优化自己博客之余，把思路和部分通用核心代码做一下公布，
所以想要实现一些炫酷的功能要不有高人帮你，
要不你就只能好好学代码，期待有一日能够厚积薄发了。
效果请自行提交评论验证。