解析 WordPress `wp_ajax_nopriv_{action}` 钩子的源码：如何处理未登录用户的 AJAX 请求。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，欢迎来到今天的 “WordPress AJAX 奇妙夜” 讲座！我是你们的导游，今晚我们将深入探索 WordPress 中一个神秘而强大的角落：wp_ajax_nopriv_{action} 钩子，专治未登录用户的 AJAX 请求。准备好了吗？系好安全带，我们要发车了！

第一站：AJAX 请求的那些事儿

先来复习一下基础。AJAX (Asynchronous JavaScript and XML) 允许我们的网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这大大提升了用户体验，让网站更流畅、更互动。

在 WordPress 中，我们经常需要处理 AJAX 请求。比如，访客在评论区提交评论，无需刷新页面就能看到评论；或者游客在线填写表单，提交后直接返回成功或失败的信息。这些都离不开 AJAX 的功劳。

第二站：为什么要区分登录用户和未登录用户？

安全！安全！还是安全！

想象一下，如果你允许任何未登录的用户随意执行某些操作，那你的网站就可能变成黑客的游乐场。他们可以恶意提交数据、篡改信息，甚至攻击你的服务器。

因此，WordPress 必须区分已登录用户和未登录用户，并对他们的权限进行严格控制。

第三站：wp_ajax_{action} vs. wp_ajax_nopriv_{action}

WordPress 提供了两个主要的钩子来处理 AJAX 请求：

wp_ajax_{action}：处理已登录用户的 AJAX 请求。
wp_ajax_nopriv_{action}：处理未登录用户的 AJAX 请求。

这里的 {action} 是一个占位符，你需要用你自定义的 action 名称来替换它。例如，如果你想处理名为 my_custom_action 的 AJAX 请求，你需要定义两个函数，分别挂载到 wp_ajax_my_custom_action 和 wp_ajax_nopriv_my_custom_action 钩子上。

第四站：wp_ajax_nopriv_{action} 的工作原理

当一个未登录用户发送 AJAX 请求时，WordPress 会检查请求中的 action 参数，然后在 wp_ajax_nopriv_{action} 钩子上查找对应的函数。如果找到了，就执行该函数；否则，就返回一个错误。

第五站：代码实战：一个简单的点赞功能

让我们通过一个实际的例子来演示如何使用 wp_ajax_nopriv_{action} 钩子。假设我们要创建一个简单的点赞功能，允许未登录用户点赞文章。

首先，我们需要在 WordPress 主题的 functions.php 文件中添加以下代码：

<?php

// 定义 AJAX 处理函数
function my_theme_handle_like() {
    // 安全检查：验证 nonce (防止 CSRF 攻击)
    check_ajax_referer( 'my_theme_like_nonce', 'security' );

    // 获取文章 ID
    $post_id = intval( $_POST['post_id'] );

    // 验证文章 ID 是否有效
    if ( empty( $post_id ) ) {
        wp_send_json_error( array( 'message' => 'Invalid post ID' ) );
    }

    // 获取当前点赞数
    $likes = get_post_meta( $post_id, '_likes', true );
    if ( empty( $likes ) ) {
        $likes = 0;
    }

    // 增加点赞数
    $likes++;

    // 更新点赞数
    update_post_meta( $post_id, '_likes', $likes );

    // 返回成功信息
    wp_send_json_success( array(
        'likes'   => $likes,
        'message' => '点赞成功！',
    ) );
}

// 挂载到 wp_ajax_nopriv_{action} 钩子上
add_action( 'wp_ajax_nopriv_my_theme_like', 'my_theme_handle_like' );

// 挂载到 wp_ajax_{action} 钩子上 (可选，如果也想允许登录用户点赞)
add_action( 'wp_ajax_my_theme_like', 'my_theme_handle_like' );

// 添加前端脚本
function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'my-theme-like', get_template_directory_uri() . '/js/like.js', array( 'jquery' ), '1.0', true );

    // 将 AJAX URL 和 nonce 传递给 JavaScript
    wp_localize_script( 'my-theme-like', 'my_theme_ajax_object', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'my_theme_like_nonce' ),
    ) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
?>

然后，我们需要创建一个名为 like.js 的 JavaScript 文件，并将其放在主题的 js 目录下：

jQuery(document).ready(function($) {
    $('.like-button').click(function(e) {
        e.preventDefault();

        var post_id = $(this).data('post-id');
        var button = $(this);

        $.ajax({
            url: my_theme_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'my_theme_like',
                post_id: post_id,
                security: my_theme_ajax_object.security
            },
            dataType: 'json',
            beforeSend: function() {
              button.prop('disabled', true);
            },
            success: function(response) {
                if (response.success) {
                    button.find('.like-count').text(response.data.likes);
                    button.addClass('liked');
                    button.prop('disabled', false);
                } else {
                    alert(response.data.message);
                    button.prop('disabled', false);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);
                alert('发生错误：' + textStatus + ' (' + errorThrown + ')');
                button.prop('disabled', false);
            }
        });
    });
});

最后，我们需要在文章模板中添加一个点赞按钮：

<button class="like-button" data-post-id="<?php the_ID(); ?>">
    点赞 (<span class="like-count"><?php echo get_post_meta( get_the_ID(), '_likes', true ) ?: 0; ?></span>)
</button>

代码解读：

PHP (functions.php):
- my_theme_handle_like(): 这是处理 AJAX 请求的核心函数。
  - check_ajax_referer(): 验证 nonce，防止跨站请求伪造 (CSRF) 攻击。非常重要！
  - $_POST['post_id']: 从 AJAX 请求中获取文章 ID。
  - get_post_meta(): 获取文章的点赞数。
  - update_post_meta(): 更新文章的点赞数。
  - wp_send_json_success() 和 wp_send_json_error(): 返回 JSON 格式的响应给客户端。
- add_action( 'wp_ajax_nopriv_my_theme_like', 'my_theme_handle_like' ): 将 my_theme_handle_like() 函数挂载到 wp_ajax_nopriv_my_theme_like 钩子上。
- add_action( 'wp_ajax_my_theme_like', 'my_theme_handle_like' ): 将 my_theme_handle_like() 函数挂载到 wp_ajax_my_theme_like 钩子上(登录用户)。
- my_theme_enqueue_scripts(): 加载 JavaScript 文件，并使用 wp_localize_script() 将 AJAX URL 和 nonce 传递给 JavaScript。
JavaScript (like.js):
- $('.like-button').click(): 监听点赞按钮的点击事件。
- $.ajax(): 发送 AJAX 请求到 admin-ajax.php。
  - action: 'my_theme_like': 指定要执行的 action。
  - post_id: post_id: 传递文章 ID。
  - security: my_theme_ajax_object.security: 传递 nonce。
  - success(): 处理 AJAX 请求成功后的响应。
  - error(): 处理 AJAX 请求失败后的响应。

第六站：安全性考量

使用 wp_ajax_nopriv_{action} 钩子时，务必注意安全性。

验证 Nonce: 使用 check_ajax_referer() 函数验证 nonce，防止 CSRF 攻击。
输入验证: 对所有从 AJAX 请求中获取的数据进行验证和清理，防止 SQL 注入和 XSS 攻击。
权限控制: 即使是未登录用户，也应该对他们可以执行的操作进行严格的权限控制。比如，可以限制每个 IP 地址的点赞次数。
防止恶意请求: 可以使用验证码、IP限制等方式防止恶意请求。

第七站：调试技巧

当 AJAX 请求出现问题时，可以使用以下技巧进行调试：

浏览器开发者工具: 查看网络请求，检查请求的 URL、请求头、请求体和响应。
WordPress 调试模式: 在 wp-config.php 文件中启用调试模式，可以显示 PHP 错误和警告。
error_log() 函数: 在 PHP 代码中使用 error_log() 函数记录调试信息。
console.log() 函数: 在 JavaScript 代码中使用 console.log() 函数记录调试信息。

第八站：高级技巧

使用类来组织 AJAX 处理函数: 可以将 AJAX 处理函数封装到类中，使代码更易于维护和扩展。
使用 WordPress REST API: WordPress REST API 提供了更现代化的方式来处理 AJAX 请求。
使用缓存: 对 AJAX 请求的结果进行缓存，可以提高网站的性能。

第九站：常见问题解答

问题	解决方案
AJAX 请求没有执行	1. 检查 action 名称是否正确。 2. 检查函数是否正确地挂载到 `wp_ajax_nopriv_{action}` 钩子上。 3. 检查 JavaScript 代码中 AJAX URL 是否正确。
出现 400 Bad Request 错误	1. 检查 AJAX 请求的参数是否正确。 2. 检查服务器是否正确地接收了 AJAX 请求。
出现 500 Internal Server Error 错误	1. 检查 PHP 代码中是否存在错误。 2. 检查服务器的错误日志。
Nonce 验证失败	1. 检查 nonce 是否正确地生成和传递。 2. 检查 nonce 的有效期。

第十站：总结

wp_ajax_nopriv_{action} 钩子是 WordPress 中处理未登录用户 AJAX 请求的重要工具。掌握它的使用方法，可以让你创建更动态、更互动的 WordPress 网站。但是，在使用它时，务必注意安全性，防止恶意攻击。

希望今天的讲座对你有所帮助。记住，代码的世界充满乐趣，勇于探索，你一定会成为一名优秀的 WordPress 开发者！下次再见！

发表回复 取消回复

发表回复取消回复