WordPress评论中实现ajax无刷新

在我们开发Wordpress主题的时候，咱们需要给评论区增加一个Ajax无刷新，这样可以保证不刷新页面的情况下提交评论,这样可以大大提高网页的交互性和用户体验。

Ajax解释：

Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态Web页面的前端技术。它通过JavaScript和XML（现在通常使用JSON）等技术，实现了无需刷新整个页面就能实现局部更新的效果。例如，用户在网页中填写表单并点击“提交”按钮，通过Ajax技术可以将表单数据异步发送到服务器进行处理并获取响应，然后只更新需要更新的部分，而不需要刷新整个页面。

代码：

实现无刷新提交评论的方法是使用 Ajax 技术，并在主题的 functions.php 文件中添加一些 JavaScript。这是一个经典的 WordPress 网站开发技巧。以下是一个简单的示例：

第一步：添加 JavaScript

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

1. function add_ajax_script() {
2. wp_enqueue_script( 'ajax.js', get_template_directory_uri() . '/js/ajax.js', array('jquery'), '1.0', true );
3. }
4. add_action( 'wp_enqueue_scripts', 'add_ajax_script' );

2.创建一个名为 ajax.js 的新文件，并将其放在您的主题的 JS 文件夹中。

3.在 ajax.js 文件中添加以下代码：

1. jQuery(document).ready(function($) {
2. $('.comment-form').submit(function() {
3. var form = $(this);
4. var formData = form.serialize();
5. $.ajax({
6. type: 'POST',
7. url: form.attr('action'),
8. data: formData,
9. success: function(response) {
10. $('#comment').val('');
11. $('#comments').html(response);
12. },
13. error: function(jqXHR, textStatus, errorThrown) {
14. console.log(jqXHR + " :: " + textStatus + " :: " + errorThrown);
15. }
16. });
17. return false;
18. });
19. });

第二步：更新主题中的 comments.php 文件

1.打开您当前 WordPress 主题的 comments.php 文件并查找以下代码块（可能在不同的位置）：

1. <?php comment_form(); ?>

2.将这行代码更改为：

1. <form id="commentform" class="comment-form" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post">

第三步：获取评论的方式

最后一步是通过 comments.php 的适当方式输出评论。在上面的 JavaScript 中，我们使用 Ajax 将数据提交到 wp-comments-post.php URL，并将响应替换评论表单之后的页面。这意味着您需要在 comments.php 文件中使用响应的 WordPress 函数输出评论。这通常在代码中像这样：

1. <?php comments_template(); ?>

或者：

1. <?php wp_list_comments(); ?>

确保使用正确的函数来呈现评论。

这就是实现无刷新提交评论的基础。请注意，上述代码可能需要进行一些适应，具体取决于您的主题和评论系统的特定实现方式。