jQuery 實現 Ajax 留言
編輯：AJAX詳解
改造ＰＨＰ文件 comments.PHP
其實這一步不是必須的，你完全可以寫一份適用於非標准的 comments.PHP 的 jQuery 代碼
，不過還是建議你把留言模板中的各個元素的 ID 定義標准，譬如把填寫留言信息的表單（form）的 ID 設為 #commentform，留言 列表 ul 或 ol 的 ID 設為 #commentlist 等等。另外，視具體情況
，你可能需要在合適的地方新增兩個 span 元素，ID 分別設為 #commentload 和 #commenterror，用來顯示留言提交狀態和錯誤信息，不過這也不是必須的。然後，把整個 #commentform 和附屬的元素
用一個大的 div 包進來，ID 設為 #commentformbox，…… 你猜對了，這一步仍然不是必須的，我們做這麼多不過是為了迎合下面的 jQuery 腳本，我在這裡貼出來的可能只直接適用於自己的主題，但
是如果你能夠看得懂下面的代碼，那麼你也明白怎麼樣把這些代碼改為適合自己的。 
/>
實現相應的 jQuery 代碼：comments.JS
jQuery 提供了 jQuery.AJax API，使用起來相當簡便，在這裡，我們需要用到的參數有 String
url, Object data, String type, Function beforeSend, Function error, Function success，前三個參數用來定義
AJax 請求的地址、數據、請求類型，後三個函數用來給發送請求之前、發生錯誤和請求成功添加處理動作。
以下是代碼（借鑒於同樣很好很強大的 K2 主題，
並做了部分修改）：
if ($('#commentform').length) {
$('#commentform').submit(function(){
jQuery.AJax({
url: 'comments-
AJax.PHP', // 這裡要改為 comments-AJax.PHP 文件的位置
data: $('#commentform').serialize(), // 從表單中獲取數據
type: 'POST', // 設置請求類型為 ‘POST’，默認為 ‘GET’
beforeSend: function() {
$
('#commenterror').hide
();
$('#commentload')
.show();
}
,
error: function(request) {
$('#commentload').hide();
$('#commenterror').show().Html(request.responseText);
},
success: function
(data) {
$('textarea').each(function(){
this.value='';
});
$('#commenterror').hide().Html();
$('#comments').Html(parseInt($
('#comments').Html
()) + 1);
if (!$('#commentlist').length) {
$('#pinglist').before('<ul id="commentlist"></ul>')
;
}
$('#commentlist').append(data); // 追加留言數據
$('#commentform :input').attr('disabled', true);
$('#commentformbox').fadeOut(1000);
$('#commentload').hide();
setTimeout(function() { // 提交留言 15 秒後方可再次提交新留言
$('#commentform
:input').removeAttr('disabled');
$('#commentformbox').fadeIn(1000);
}, 15000);
}
});
return false;
});
}
編寫 comments-AJax.PHP
這個文件就是我們剛才寫好的 jQuery 代碼請求的鏈接，用來把從 #commentform 表單中得到的信息添加至 WP 數據庫
中。下面這段代碼是直接從 K2 主題中 COPY 過來的（感謝 K2 的數位作者！），需要注意的是，最後一部分的 li 元素（對應於一條留言）需要修改到與你自己的
comments.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>
收尾工作及測試
上面的工作做完後，把這幾個文件存在當前主題所在目錄下面，記得在 header.PHP 中引
入 jQuery 框架和你剛才寫好的 comments.JS，否則留言功能是不起作用的哦。在浏覽器中按下 Ctrl + F5 重新加載你的 blog 日志後，寫幾句話提交，是不是已經變成 AJax 的了？留言提交成功後，
留言框 #commentformbox “淡出”的效果看到了麼，過 15 秒後它又會“淡入”。嗯，對了，你也發現了，在點擊提交留言的按鈕之後，如果沒有一個不斷旋轉的動畫圖標 表達“正在提交”，肯定不夠過瘾，那我們來把它加上，把這個圖標另存到你的主題所在目錄
下的 images 目錄下（繞口令），然後打開 style.CSS 在其中加上一句：
#commentload {
display: none;
height: 18px;
width: 18px;
background: url('images/spinner.gif') no-repeat center center;
}
當然，如果覺得這個動畫圖標不好看，你可以到
href="http://ajaxload.info/">這裡生成你最中意的。
小編推薦
熱門推薦