剖析 WordPress `ajax_url` 全局变量的源码：它如何指向 `admin-ajax.php`。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

嘿，各位代码爱好者！今天咱们来聊聊 WordPress 里的一个神奇小家伙—— ajax_url 全局变量。别看它名字平平无奇，实际上它可是 WordPress 实现 AJAX 功能的关键人物。很多人在折腾 AJAX 请求的时候，都会遇到它，但却不一定真正了解它的来龙去脉。今天，咱们就来扒一扒它的源码，看看它到底是怎么指向 admin-ajax.php 这个幕后大 BOSS 的。

第一章：认识 admin-ajax.php—— AJAX 的中央处理器

在开始深入 ajax_url 之前，我们先要搞清楚 admin-ajax.php 是个什么东西。简单来说，admin-ajax.php 就像是 WordPress AJAX 请求的中央处理器，所有前端发起的 AJAX 请求，最终都会汇集到它这里，然后由它来分发处理，最终把结果返回给前端。

想象一下，你正在构建一个 WordPress 插件，需要实现一个用户点击按钮后，后台自动更新数据的 AJAX 功能。那么，这个按钮点击事件触发的 AJAX 请求，就需要发送到 admin-ajax.php，然后 admin-ajax.php 会根据你设定的参数，调用相应的 WordPress 函数，执行数据更新操作，最后把更新结果返回给你的插件。

第二章：ajax_url 的身世之谜——全局变量的诞生

OK，了解了 admin-ajax.php 的重要性，我们再来看看 ajax_url 这个全局变量是怎么来的。

ajax_url 通常会在 WordPress 后台的 wp_enqueue_scripts 动作中被定义。这个动作允许我们在后台加载 JavaScript 文件，并且在加载的时候，可以向 JavaScript 文件传递一些数据。

下面是一个典型的例子：

<?php
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

function my_enqueue_scripts() {
  wp_enqueue_script( 'my-ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array( 'jquery' ), '1.0', true );

  wp_localize_script( 'my-ajax-script', 'my_ajax_object', array(
    'ajax_url' => admin_url( 'admin-ajax.php' ),
    'nonce'    => wp_create_nonce( 'my_ajax_nonce' )
  ) );
}
?>

让我们逐行分析这段代码：

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );：这行代码将 my_enqueue_scripts 函数挂载到 wp_enqueue_scripts 动作上。这意味着当 WordPress 加载脚本时，my_enqueue_scripts 函数会被执行。
wp_enqueue_script( 'my-ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array( 'jquery' ), '1.0', true );：这行代码注册并加载了一个名为 my-ajax-script 的 JavaScript 文件。它依赖于 jquery，版本号为 1.0，并且在页面底部加载。
wp_localize_script( 'my-ajax-script', 'my_ajax_object', array(...) );：这行代码是关键！它使用 wp_localize_script 函数，将一些数据传递给 my-ajax-script.js 文件。
- 'my-ajax-script'：这是要传递数据的 JavaScript 文件的句柄，必须与 wp_enqueue_script 中使用的句柄一致。
- 'my_ajax_object'：这是在 JavaScript 文件中使用的对象名称，通过这个对象，我们可以访问传递过来的数据。
- array(...)：这是一个关联数组，包含了要传递的数据。在这里，我们传递了两个数据：
  - 'ajax_url' => admin_url( 'admin-ajax.php' )：这行代码使用 admin_url 函数生成 admin-ajax.php 的 URL，并将其赋值给 ajax_url 键。这就是 ajax_url 全局变量的来源！
  - 'nonce' => wp_create_nonce( 'my_ajax_nonce' )：这行代码生成一个 nonce 值，用于安全验证，防止 CSRF 攻击。

现在，在 my-ajax-script.js 文件中，我们就可以通过 my_ajax_object.ajax_url 来访问 admin-ajax.php 的 URL 了。

第三章：admin_url() 函数的幕后功臣——URL 的构建

在上面的代码中，admin_url( 'admin-ajax.php' ) 函数起着至关重要的作用。它负责生成 admin-ajax.php 的完整 URL。让我们来看看 admin_url() 函数的源码：

<?php
function admin_url( $path = '', $scheme = 'admin' ) {
    $url = get_admin_url( null, $path, $scheme );

    /**
     * Filters the URL to the admin area based on the path specified.
     *
     * @since 2.6.0
     *
     * @param string $url    The complete URL to the admin area including scheme and path.
     * @param string $path   Path relative to the admin URL.
     * @param string $scheme The scheme to use. Accepts 'http', 'https', 'login', 'login_post',
     *                       'admin', or 'relative'.
     */
    return apply_filters( 'admin_url', $url, $path, $scheme );
}
?>

admin_url() 函数实际上只是调用了 get_admin_url() 函数，并应用了一个过滤器 admin_url。我们重点关注 get_admin_url() 函数：

<?php
function get_admin_url( $blog_id = null, $path = '', $scheme = 'admin' ) {
    global $current_site, $current_blog;

    if ( ! is_numeric( $blog_id ) ) {
        $blog_id = get_current_blog_id();
    }

    $admin_url = get_option( 'siteurl' );

    if ( ! is_null( $current_site ) && ! is_main_site() ) {
        $admin_url = str_replace( $current_site->domain . $current_site->path, $current_site->domain . $current_site->path . get_blogaddress_by_id( $blog_id ), $admin_url );
    }

    $admin_url = trailingslashit( $admin_url );

    if ( $path && is_string( $path ) ) {
        $admin_url .= ltrim( $path, '/' );
    }

    $admin_url = set_url_scheme( $admin_url, $scheme );

    /**
     * Filters the URL to the admin area.
     *
     * @since 2.2.0
     *
     * @param string $admin_url The complete URL to the admin area including scheme and path.
     * @param string $path      Path relative to the admin URL.
     * @param int    $blog_id    Blog ID.
     * @param string $scheme    The scheme to use. Accepts 'http', 'https', 'login', 'login_post',
     *                        'admin', or 'relative'.
     */
    return apply_filters( 'get_admin_url', $admin_url, $path, $blog_id, $scheme );
}
?>

这段代码的主要逻辑如下：

获取 siteurl 选项的值，这通常是 WordPress 站点的根 URL。
如果当前站点不是主站点，则根据博客 ID 修改 URL。
添加尾部斜杠。
将传入的 $path 参数（例如 admin-ajax.php）添加到 URL 后面。
根据 $scheme 参数设置 URL 的协议（例如 http 或 https）。

最终，get_admin_url() 函数会返回一个完整的 admin-ajax.php 的 URL，例如 https://example.com/wp-admin/admin-ajax.php。

第四章：JavaScript 中的 AJAX 请求——ajax_url 的应用

现在，我们已经成功地将 admin-ajax.php 的 URL 传递到了 JavaScript 文件中。接下来，我们就可以在 JavaScript 中使用这个 URL 发起 AJAX 请求了。

jQuery(document).ready(function($) {
  $('#my-button').click(function() {
    $.ajax({
      url: my_ajax_object.ajax_url, // 使用全局变量 ajax_url
      type: 'POST',
      data: {
        action: 'my_ajax_action', // 指定要执行的 AJAX action
        nonce: my_ajax_object.nonce, // 传递 nonce 值
        some_data: 'some_value'
      },
      success: function(response) {
        console.log(response); // 处理返回的结果
      }
    });
  });
});

这段代码做了以下几件事：

当 ID 为 my-button 的元素被点击时，触发 AJAX 请求。
url: my_ajax_object.ajax_url：这里我们使用了 my_ajax_object.ajax_url，它就是我们在 PHP 中定义的全局变量。
type: 'POST'：指定请求类型为 POST。
data: { ... }：这是要发送到 admin-ajax.php 的数据。
- action: 'my_ajax_action'：这是最重要的参数！它告诉 admin-ajax.php 要执行哪个 AJAX action。
- nonce: my_ajax_object.nonce：传递 nonce 值，用于安全验证。
- some_data: 'some_value'：其他需要传递的数据。
success: function(response) { ... }：当 AJAX 请求成功时，执行这个函数，处理返回的结果。

第五章：PHP 中的 AJAX Action——admin-ajax.php 的响应

OK，前端的 AJAX 请求已经发出去了，接下来，我们就需要在 PHP 中定义一个 AJAX action 来处理这个请求。

<?php
add_action( 'wp_ajax_my_ajax_action', 'my_ajax_callback' );
add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax_callback' );

function my_ajax_callback() {
  // 验证 nonce 值
  check_ajax_referer( 'my_ajax_nonce', 'nonce' );

  // 获取传递过来的数据
  $some_data = $_POST['some_data'];

  // 执行一些操作
  $result = 'Hello, ' . $some_data . '!';

  // 返回结果
  wp_send_json_success( array( 'message' => $result ) );

  // 必须调用 wp_die() 结束 AJAX 请求
  wp_die();
}
?>

让我们分解这段代码：

add_action( 'wp_ajax_my_ajax_action', 'my_ajax_callback' );：这行代码将 my_ajax_callback 函数挂载到 wp_ajax_my_ajax_action 动作上。这意味着当 admin-ajax.php 接收到 action 参数值为 my_ajax_action 的 AJAX 请求时，my_ajax_callback 函数会被执行。这个动作只针对已登录用户。
add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax_callback' );：这行代码将 my_ajax_callback 函数挂载到 wp_ajax_nopriv_my_ajax_action 动作上。这个动作只针对未登录用户。如果你的 AJAX 功能需要允许未登录用户访问，那么就需要同时挂载这两个动作。
function my_ajax_callback() { ... }：这是处理 AJAX 请求的回调函数。
- check_ajax_referer( 'my_ajax_nonce', 'nonce' );：验证 nonce 值，防止 CSRF 攻击。
- $some_data = $_POST['some_data'];：获取从前端传递过来的数据。
- $result = 'Hello, ' . $some_data . '!';：执行一些操作，生成结果。
- wp_send_json_success( array( 'message' => $result ) );：使用 wp_send_json_success 函数将结果以 JSON 格式返回给前端。
- wp_die();：必须调用 wp_die() 函数来结束 AJAX 请求。

第六章：总结——ajax_url 的使命

现在，我们已经完整地走完了整个 AJAX 请求的流程。让我们来总结一下 ajax_url 的作用：

ajax_url 是一个全局变量，它包含了 admin-ajax.php 的 URL。
ajax_url 通常通过 wp_localize_script 函数传递给 JavaScript 文件。
在 JavaScript 中，我们可以使用 ajax_url 来发起 AJAX 请求，将请求发送到 admin-ajax.php。
admin-ajax.php 会根据 action 参数调用相应的 PHP 函数来处理 AJAX 请求。

表格总结

角色	职责	涉及函数/变量
`admin-ajax.php`	接收并处理所有 AJAX 请求，根据 `action` 参数分发请求到相应的 PHP 函数。	无（作为入口点）
`ajax_url`	全局变量，存储 `admin-ajax.php` 的 URL，供 JavaScript 使用。	无（作为全局变量）
`wp_enqueue_scripts`	注册并加载 JavaScript 文件，并将数据传递给 JavaScript 文件。	`wp_enqueue_script()`, `wp_localize_script()`
`admin_url()`	生成 `admin-ajax.php` 的 URL。	`get_admin_url()`
AJAX 请求 (JS)	使用 `ajax_url` 发起 AJAX 请求，将数据发送到 `admin-ajax.php`。	`jQuery.ajax()` (或其他 AJAX 函数)
AJAX Action (PHP)	定义处理 AJAX 请求的 PHP 函数，使用 `add_action` 将函数挂载到 `wp_ajax_` 或 `wp_ajax_nopriv_` 动作上。	`add_action()`, `check_ajax_referer()`, `wp_send_json_success()`, `wp_send_json_error()`, `wp_die()`

最后的温馨提示

记得要对 AJAX 请求进行安全验证，使用 nonce 值可以有效地防止 CSRF 攻击。
不要在 AJAX 请求中泄露敏感信息。
使用 wp_send_json_success 和 wp_send_json_error 函数可以方便地将数据以 JSON 格式返回给前端。
务必在 AJAX 回调函数中调用 wp_die() 函数，否则可能会导致 WordPress 页面无法正常显示。

希望今天的讲解能够帮助你更好地理解 WordPress 中的 ajax_url 全局变量，以及 AJAX 请求的整个流程。下次再遇到 AJAX 相关的问题，相信你就能更加得心应手了！下次再见！

发表回复 取消回复

发表回复取消回复