使用 jQuery 实现 wordpress 的 Ajax 留言

这篇文章早就想写了，但一直心里没什么底，不知道自己写出来的东西大家能不能够充分的理解和接受，呵呵！因为自己当初就被搞晕了，研究了好长一段时间，不过真正懂得其原理和用法后就可以灵活运用了。当然对于高手来说这些都是小菜了，写给对 jQuery 和 Ajax 还很陌生的人！！具体效果可看本站留言效果！

写在前面：

本文参考至：北极冰仔部落格的使用 jQuery 实现 Ajax 留言，我当时就是研究的这篇文章。另外特别感谢 Shawn ，在学习的过程中，他给了我很大的帮助，要不然真不知道自己会搞到什么时候，哈哈！他博客里有很多好玩和实用的东西，大家可以多去逛逛，

基本知识：

jQuery ：jQuery是一个快速，简练的的JavaScript工具箱。它能够让你以简单的方式来操作HTML元素、处理事件、实现特效并为Web页面添加Ajax交互。是现在比较流行的一个 JS 库，而且很小，压缩后传输只有17KB左右！

Ajax ：全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。体现在这里就是无刷新留言，留言后不需要刷新整个页面即可显示。在一定程度上加强了用户体验和减少了页面请求，提高访问效率。

过多的就不介绍了，大家可以去 Google 哈。

小小要求：

此方法基本不用修改自己的模版文件，如果你的 comments.php 足够标准的话。因为过程中会控制一些元素的动作，此时会用到元素的 ID 或 class 属性，记住这点很重要，要不然会被搞得莫名其妙。呵呵！具体的下面再说。

开始行动，

第一步：编写 comments-ajax.php 。

这个文件的代码不用管，复制就可以，不过要将你模版中 comments.php 中 li 之间的代码替换到指定的地方，即一条留言的样式代码。然后将此文件上传至模版目录下。下面是 comments-ajax.php 的代码：

下载: comments-ajax.php

<?php
if ($_SERVER["REQUEST_METHOD"] != "POST") {
   header('Allow: POST');
   header("HTTP/1.1 405 Method Not Allowed");
   header("Content-type: text/plain");
   exit;
}
$db_check = true;
function kill_data() {
   return '';
}
function check_db() {
   global $wpdb, $db_check;
   if($db_check) {
   // Check DB
   if(!$wpdb->dbh) {
   echo('Our database has issues. Try again later.');
   } else {
   echo('We\'re currently having site problems. Try again later.');
   }
   die();
   }
}
ob_start('kill_data');
register_shutdown_function('check_db');
require_once(dirname(__FILE__)."/../../../wp-config.php");
$db_check = false;
ob_end_clean();
nocache_headers();
function fail($s) {
   header('HTTP/1.0 500 Internal Server Error');
   echo $s;
   exit;
}
$comment_post_ID = (int) $_POST['comment_post_ID'];
$status = $wpdb->get_row("SELECT post_status, comment_status FROM $wpdb->posts WHERE ID = '$comment_post_ID'");
if ( empty($status->comment_status) ) {
   do_action('comment_id_not_found', $comment_post_ID);
   fail('The post you are trying to comment on does not currently exist in the database.');
} elseif ( 'closed' == $status->comment_status ) {
   do_action('comment_closed', $comment_post_ID);
   fail('Sorry, comments are closed for this item.');
} elseif ( in_array($status->post_status, array('draft', 'pending') ) ) {
   do_action('comment_on_draft', $comment_post_ID);
   fail('The post you are trying to comment on has not been published.');
}
$comment_author = trim(strip_tags($_POST['author']));
$comment_author_email = trim($_POST['email']);
$comment_author_url = trim($_POST['url']);
$comment_content = trim($_POST['comment']);
// If the user is logged in
$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(); // start with a clean slate
   kses_init_filters(); // set up the filters
   }
   }
} else {
   if ( get_option('comment_registration') )
   fail('Sorry, you must be logged in to post a comment.');
}
$comment_type = '';
if ( get_option('require_name_email') && !$user->ID ) {
   if ( 6> strlen($comment_author_email) || '' == $comment_author )
   fail('Error: please fill the required fields (name, email).');
   elseif ( !is_email($comment_author_email))
   fail('Error: please enter a valid email address.');
}
if ( '' == $comment_content )
   fail('Error: please type a comment.');
// Simple duplicate check
$dupe = "SELECT comment_ID FROM $wpdb->comments WHERE comment_post_ID = '$comment_post_ID' AND ( comment_author = '$comment_author' ";
if ( $comment_author_email ) $dupe .= "OR comment_author_email = '$comment_author_email' ";
$dupe .= ") AND comment_content = '$comment_content' LIMIT 1";
if ( $wpdb->get_var($dupe) ) {
   fail('Duplicate comment detected; it looks as though you\'ve already said that!');
}
$commentdata = compact('comment_post_ID', 'comment_author', 'comment_author_email', 'comment_author_url', 'comment_content', 'comment_type', 'user_ID');
$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'));
$comment->comment_type = 'comment';
$comment_index = $_POST['comment_count'] + 1;
?>
<li id="comment-<?php echo $comment->comment_ID; ?>">

</li>

第二步：实现相应的 jQuery 代码：comments.js 。

这段代码大家尽量去理解，我也做了比较详细的解释。要不然会有莫名奇妙的问题出现，代码如下：

下载: comments.js

$(document).ready(function() {
if ($('#commentform').length) {
   $('#commentform').submit(function(){ //ID为 commentform 的表单提交时发生的函数，也就是整个留言输入框 form 的ID。
   jQuery.ajax({
   url: 'comments-ajax.php', //刚刚创建的 comments-ajax.php 文件的位置，建议用绝对路径。
   data: $('#commentform').serialize(),
   type: 'POST',
   beforeSend: function() {
   $('#commenterror').hide();
   var submit='<div id="commentload" style="display: none;background: url("img/spinner.gif") no-repeat scroll 0 50%;margin: 0 auto;">Submitting Comment...</div>'; //创建名为 submit 的字符串，稍后插入，这里的样式大家自己根据需要定义，那个背景图片自己去下哈。
   var error='<div id="commenterror" style="display: none;margin: 0 auto;"></div>'; //创建名为 error 的字符串
   $('#comments').after(submit); // 在ID为 comments 的元素后插入刚定义的 submit
   $('#comments').after(error); // 同样插入刚定义的 error
   $('#commentload').slideDown(); // 让submit 向下滑出
   },
   error: function(request) { //发生错误时
   $('#commentload').hide(); //隐藏 submit
   $('#commenterror').show("slow").html(request.responseText); //显示 error
   },
   success: function(data) {
   $('textarea').each(function(){
   this.value='';
   });
   $('#commenterror').hide().html();
   if (!$('#thecomments').length) {
   $('#pinglist').before('<ol id="thecomments"></ol>');}
   $('#thecomments').append(data); //向ID为 thecomments 的元素添加数据，也就是整个 ol 或 ul
   var new_comment = $('#thecomments li:last').hide(); //让最新添加的数据隐藏
   new_comment.slideDown(1000); //再显示，这里是为了实现滑出的效果，不想要也可以直接显示
   $('#commentform:input').attr('disabled', true);
   $('#commentload').slideUp("slow");
   $('#nocomment').slideUp("slow"); //这是针对我模版而加的，因为我模版在没有留言时会有个 nocomment 的元素，我要让添加一条留言后他自动隐藏，要不然会矛盾，呵呵，这个可以自行选择要或不要
   setTimeout(function() {
   $('#commentform:input').removeAttr('disabled');
   }, 10000); //这里是设置10秒之后才可以再次留言，自行设置，单位毫秒。
   }
   });
   return false;
   } );
}})