wordpress实现ajax评论(javaweb评论功能实现)

引言

评论是网站与用户之间交流的重要方式之一，用户可以通过评论表达自己的看法、建议和问题。而作为网站管理员，我们需要为用户提供一个方便快捷、实用可靠的评论系统，以增加用户黏性和提升网站质量。本文将介绍如何使用WordPress实现ajax评论功能，让您的网站评论更加智能化、高效化。

什么是ajax评论

AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，它可以使网页在不重新加载的情况下更新部分内容。在WordPress中，ajax评论就是利用AJAX技术实现的评论功能，用户可以在不刷新页面的情况下提交评论，同时可以实时显示评论内容。

实现ajax评论的步骤

步骤一：添加评论框

在WordPress主题的single.php文件中添加评论框代码：

<div id="respond"><h3>发表评论</h3><form action="/wp-comments-post.php" method="post" id="commentform"><input type="text" name="author" id="author" value="" placeholder="姓名"><input type="text" name="email" id="email" value="" placeholder="邮箱"><input type="text" name="url" id="url" value="" placeholder="网址"><textarea name="comment" id="comment" rows="10" placeholder="说点什么吧..."></textarea><input type="submit" name="submit" id="submit" value="提交评论"><input type="hidden" name="comment_post_ID" value="ID; ?>" id="comment_post_ID" /></form></div>

其中，id为respond的div是评论框的容器，form表单中的action属性指向WordPress的评论提交地址，comment_post_ID是当前文章的ID。

步骤二：添加ajax脚本

在主题的functions.php文件中添加以下代码：

function ajax_comments() {wp_enqueue_script('jquery');wp_enqueue_script('comment-reply');wp_register_script('ajax-comments', get_template_directory_uri().'/js/ajax-comments.js', array('jquery'));wp_enqueue_script('ajax-comments');}add_action('wp_enqueue_scripts', 'ajax_comments');

这段代码的作用是注册并加载ajax-comments.js脚本，该脚本用于实现ajax评论功能。其中，get_template_directory_uri()函数用于获取主题文件夹的URL。

步骤三：编写ajax-comments.js脚本

在主题文件夹中创建js文件夹，并在其中创建ajax-comments.js文件，添加以下代码：

jQuery(document).ready(function($) {$('#commentform').submit(function() {var form = $(this);var data = {action: 'ajax_comments',author: form.find('#author').val(),email: form.find('#email').val(),url: form.find('#url').val(),comment: form.find('#comment').val(),comment_post_ID: form.find('#comment_post_ID').val()};$.ajax({type: 'POST',url: '',data: data,beforeSend: function(xhr) {form.find('#submit').attr('disabled', 'disabled');},success: function(data) {var response = $.parseJSON(data);if(response.success) {$('#comments').prepend(response.html);form.find('#comment').val('');}},complete: function() {form.find('#submit').removeAttr('disabled');}});return false;});});

这段代码的作用是监听评论表单的提交事件，获取表单数据并通过ajax方式提交到WordPress后台处理。其中，admin_url('admin-ajax.php')函数用于获取WordPress后台的ajax处理地址。

步骤四：编写ajax处理函数

在主题的functions.php文件中添加以下代码：

function ajax_comments_handler() {$author = $_POST['author'];$email = $_POST['email'];$url = $_POST['url'];$comment = $_POST['comment'];$comment_post_ID = $_POST['comment_post_ID'];$comment_parent = isset($_POST['comment_parent']) ? $_POST['comment_parent'] : 0;$commentdata = array('comment_author' => $author,'comment_author_email' => $email,'comment_author_url' => $url,'comment_content' => $comment,'comment_post_ID' => $comment_post_ID,'comment_parent' => $comment_parent,'user_ID' => get_current_user_id(),'comment_date' => current_time('mysql'),'comment_approved' => 1,);$comment_id = wp_insert_comment($commentdata);$comment = get_comment($comment_id);$response = array('success' => true,'html' => '<li class="comment" id="comment-'.$comment_id.'"><div class="comment-author vcard"><img alt="" src="'.get_avatar_url($comment->comment_author_email, array('size' => 48)).'" class="avatar photo"  ><cite class="fn">'.$comment->comment_author.'</cite></div><div class="comment-body"><p>'.$comment->comment_content.'</p></div></li>',);echo json_encode($response);exit;}add_action('wp_ajax_ajax_comments', 'ajax_comments_handler');add_action('wp_ajax_nopriv_ajax_comments', 'ajax_comments_handler');

这段代码的作用是处理ajax提交的评论数据，并将评论插入到数据库中。返回一个json格式的响应数据，其中包含评论的HTML代码和成功标志。