乌徒帮技术范技术中心Ajax › wordpress无刷新评论:无需插件ajax实现wordpress comment无刷新机制

wordpress无刷新评论:无需插件ajax实现wordpress comment无刷新机制

分类:Ajax

在wordpress博客中要实现无刷新完成评论并不困难,本文通过利用jquery中ajax的方法,实现无需插件的无刷新评论机制。技术要求:jquery+ajax+wordpress+php,有一定基础的开发者即可迅速实现。

一、php部分

首先,你需要一个php文件,用来作为提交页面,并通过它返回给前台页面对应的数据。既然是对提交的评论数据进行处理,我自然而然的想到了根目录下的wp-comment-posts.php文档,基于该文档,我们得到了下面的代码。

<?php
/**
* 这个文件是从根目录下拷贝过来的comment-posts.php文件,主要功能就是提交评论,同时增加了显示出结果的功能。
*/

if ( 'POST' != $_SERVER['REQUEST_METHOD'] ) {
header('Allow: POST');
header('HTTP/1.1 405 Method Not Allowed');
header('Content-Type: text/plain');
exit;
}

/** Sets up the WordPress Environment. */
require( dirname(__FILE__) . '/../../../../wp-load.php' ); //修改load.php地址

nocache_headers();

$comment_post_ID = isset($_POST['comment_post_ID']) ? (int) $_POST['comment_post_ID'] : 0;

$post = get_post($comment_post_ID);

if ( empty($post->comment_status) ) {
do_action('comment_id_not_found', $comment_post_ID);
exit;
}

// get_post_status() will get the parent status for attachments.
$status = get_post_status($post);

$status_obj = get_post_status_object($status);

if ( !comments_open($comment_post_ID) ) {
do_action('comment_closed', $comment_post_ID);
wp_die( __('Sorry, comments are closed for this item.') );
} elseif ( 'trash' == $status ) {
do_action('comment_on_trash', $comment_post_ID);
exit;
} elseif ( !$status_obj->public && !$status_obj->private ) {
do_action('comment_on_draft', $comment_post_ID);
exit;
} elseif ( post_password_required($comment_post_ID) ) {
do_action('comment_on_password_protected', $comment_post_ID);
exit;
} else {
do_action('pre_comment_on_post', $comment_post_ID);
}

$comment_author = ( isset($_POST['author']) ) ? trim(strip_tags($_POST['author'])) : null;
$comment_author_email = ( isset($_POST['email']) ) ? trim($_POST['email']) : null;
$comment_author_url = ( isset($_POST['url']) ) ? trim($_POST['url']) : null;
$comment_content = ( isset($_POST['comment']) ) ? trim($_POST['comment']) : null;

// If the user is logged in
$user = wp_get_current_user();
if ( $user->ID ) {
if ( empty( $user->display_name ) )
$user->display_name=$user->user_login;
$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') || 'private' == $status )
wp_die( __('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 )
wp_die( __('<strong>ERROR</strong>: please fill the required fields (name, email).') );
elseif ( !is_email($comment_author_email))
wp_die( __('<strong>ERROR</strong>: please enter a valid email address.') );
}

if ( '' == $comment_content )
wp_die( __('<strong>ERROR</strong>: please type a comment.') );

$comment_parent = isset($_POST['comment_parent']) ? absint($_POST['comment_parent']) : 0;

$commentdata = compact('comment_post_ID', 'comment_author', 'comment_author_email', 'comment_author_url', 'comment_content', 'comment_type', 'comment_parent', 'user_ID');

$comment_id = wp_new_comment( $commentdata );

$comment = get_comment($comment_id);
if ( !$user->ID ) {
$comment_cookie_lifetime = apply_filters('comment_cookie_lifetime', 30000000);
setcookie('comment_author_' . COOKIEHASH, $comment->comment_author, time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
setcookie('comment_author_email_' . COOKIEHASH, $comment->comment_author_email, time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
setcookie('comment_author_url_' . COOKIEHASH, esc_url($comment->comment_author_url), time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
}

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

?>

<li class="comment-ajax-add">
<div id="comment-<?php comment_ID() ?>" class="comment-box">
<?php echo get_avatar($comment,$size='50'); ?>
<div class="comment-content">
<div class="comment-info">
<span><?php echo get_comment_author_link(); ?></span>
<span><?php echo get_comment_date('Y/m/d '); ?></span>
<span><?php echo get_comment_time('H:i:s'); ?></span>
<span class="float-right"><?php edit_comment_link('编辑','','') ?></span>
</div>
<div class="comment-text">
<?php comment_text(); ?>
</div>
<?php if ($comment->comment_approved == '0')printf('<div class="approve">%s</div>','您的见解正在审核中,很快就会出现在评论列表~~'); ?>
</div>
</div>
</li>

将这段代码保存为comment_ajax.php放在主题目录之下。这段代码非常好理解,在一连串的////////////上面是原原本本从根目录下的wp-comment-posts.php抄过来的,之下是从functions.php中的mytheme_comment函数中抄过来的,前提是你为自己制作了评论列表,这样你肯定会用到该函数,不过你需要根据自己的情况修改这一部分。该文档实现的功能也非常简单,即利用提交过来的评论数据,进行数据库写入,增加评论,同时显示出增加的评论的内容。

二、ajax实现前提的数据传输,同时将返回的结果直接显示在下面

我们要做的就是利用ajax,将数据传送到刚才创建的php文档,实现数据的插入。

// 评论ajax不刷新
$('#respond form#commentform').submit(function($e){
$e.preventDefault();
$(this).find('#submit').attr('disabled',true).fadeTo('slow',0.2);
var $url = $template_url + '/plugins/comment_ajax.php'
$.ajax({
url : $url,
data : $('#commentform').serialize(),
type: 'POST',
beforeSend : function(){
//alert($url);
$('#respond form#commentform #submit').parent().append('<span style="color:red;" class="loading">提交中...</span>');
var $i = 0;
setInterval(function(){$('#respond form#commentform').find('span.loading').append('.');$i ++;if($i == 30)$('#respond form#commentform').find('span.loading').text('<span style="color:red;" class="loading">提交中...</span>');},1000);
},
success : function(data){
//alert('success');
$('#respond form#commentform').find('span.loading').remove();
$comment_parent = $('#comment_parent');
if($comment_parent != undefined)$('#respond').parent().parent().append(data);
else $('ol#comments-lists').append(data);
$('#respond form#commentform #submit').attr('disabled',false).fadeTo('slow',1);
$('#respond form#commentform textarea').val('');
},
error : function(request){
$('#respond form#commentform').find('span.loading').text(request.responseText);
setTimeout(function(){
$('#respond form#commentform #submit').attr('disabled',false).fadeTo('slow',1);
$('#respond form#commentform').find('span.loading').remove();
},3000);
//alert($url);
}
});
});

其中,$url需要你自己定义,其他一些选择器也需要你根据自己的情况进行修改,以及在哪个位置出现新的评论都要自己进行修改,你需要自己的jquery知识。原理也很简单,当提交评论表单时,禁止再点击提交,将表单的内容传输给刚才创建的php文档,最后获得php返回的数据,将返回的结果添加到对应的适当的地方。非常简单不是吗?

填写个人信息,赶快回复吧!