WordPress源码深度解析之：`WordPress`的`AJAX`：`wp_ajax_*`和`wp_ajax_nopriv_*` `action`的实现。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，今天咱来聊聊WordPress里那些个“嗖嗖嗖”飞来飞去的AJAX请求，以及背后操控它们的神秘代码。别怕，咱用最接地气的方式，把这看似高深的东西扒个精光。

开场白：为啥要聊AJAX？

想象一下，你正在WordPress后台编辑文章，添加了一个分类，页面“嗖”的一声就更新了，不用刷新整个页面。这就是AJAX的魅力！它让网页局部更新，用户体验倍儿棒。而wp_ajax_*和wp_ajax_nopriv_*这两个action，就是WordPress里处理AJAX请求的两大主力。

第一章：AJAX请求的“前戏”——前端代码

任何一个AJAX请求，都得有个“发起者”。在WordPress里，这“发起者”通常是JavaScript代码。

jQuery(document).ready(function($) {
  $('#my-button').click(function() {
    $.ajax({
      url: ajaxurl, // WordPress自动定义的全局变量，指向admin-ajax.php
      type: 'POST',
      data: {
        action: 'my_ajax_function', // 后端钩子的关键！
        security: my_ajax_object.security, // 安全令牌
        some_data: 'Hello, WordPress!'
      },
      success: function(response) {
        console.log(response); // 处理后端返回的数据
      }
    });
  });
});

这段代码做了几件事：

jQuery(document).ready(function($) { ... });: 确保页面加载完毕后再执行代码。
$('#my-button').click(function() { ... });: 监听ID为my-button的元素的点击事件。
$.ajax({ ... });: 发起AJAX请求。
- url: ajaxurl: 这货很重要！ ajaxurl是一个全局JavaScript变量，由WordPress自动定义，指向wp-admin/admin-ajax.php。所有AJAX请求都会发送到这里。如果你没有这个变量，需要在主题的functions.php中定义：
```
function my_enqueue_scripts() {
  wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array( 'jquery' ) );
  wp_localize_script( 'my-script', 'my_ajax_object', array(
    'ajax_url' => admin_url( 'admin-ajax.php' ),
    'security' => wp_create_nonce( 'my_nonce' ) // 创建安全令牌
  ));
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
```
  - wp_enqueue_script(): 注册并加载JavaScript文件。
  - wp_localize_script(): 将PHP变量传递给JavaScript。这里传递了ajax_url和security。
- type: 'POST': 指定请求方式为POST。通常AJAX请求都用POST，因为更安全。
- data: { ... }: 传递给后端的数据。
  - action: 'my_ajax_function': 最关键！这个action决定了后端哪个函数会被调用。
  - security: my_ajax_object.security: 安全令牌，防止CSRF攻击。
  - some_data: 'Hello, WordPress!': 其他需要传递的数据。
- success: function(response) { ... }: 请求成功后的回调函数，处理后端返回的数据。

第二章：后端“接客”——wp_ajax_*和wp_ajax_nopriv_*

前端发起了AJAX请求，后端就要“接客”了。 WordPress通过wp_ajax_*和wp_ajax_nopriv_*这两个action来处理AJAX请求。

*`wpajax`**: 处理已登录用户的AJAX请求。
*`wp_ajaxnopriv`**: 处理未登录用户的AJAX请求。

注意：*会被替换成你在前端data中定义的action值。

例如，前端data中action是'my_ajax_function'，那么后端就要定义两个函数：

// 已登录用户
add_action( 'wp_ajax_my_ajax_function', 'my_ajax_function' );

// 未登录用户
add_action( 'wp_ajax_nopriv_my_ajax_function', 'my_ajax_function' );

function my_ajax_function() {
  // 安全验证
  check_ajax_referer( 'my_nonce', 'security' );

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

  // 处理数据...
  $response = 'You said: ' . $some_data;

  // 返回数据给前端
  wp_send_json_success( $response ); // 或者 wp_send_json_error( $error_message );

  // 必须调用wp_die()结束脚本，否则会返回额外的HTML
  wp_die();
}

这段代码做了几件事：

add_action( 'wp_ajax_my_ajax_function', 'my_ajax_function' );: 将my_ajax_function函数挂载到wp_ajax_my_ajax_function action上，处理已登录用户的请求。
add_action( 'wp_ajax_nopriv_my_ajax_function', 'my_ajax_function' );: 将my_ajax_function函数挂载到wp_ajax_nopriv_my_ajax_function action上，处理未登录用户的请求。
function my_ajax_function() { ... }: 定义处理AJAX请求的函数。
- check_ajax_referer( 'my_nonce', 'security' );: 验证安全令牌，防止CSRF攻击。 'my_nonce'是你在wp_create_nonce()中定义的nonce name，'security'是前端传递过来的参数名。
- $some_data = $_POST['some_data'];: 获取前端传递的数据。
- $response = 'You said: ' . $some_data;: 处理数据，生成响应。
- wp_send_json_success( $response );: 返回JSON格式的成功响应。 WordPress提供了wp_send_json_success()和wp_send_json_error()两个函数，方便你返回JSON格式的数据。
- wp_die();: 必须调用wp_die()结束脚本！否则会返回额外的HTML，导致AJAX请求失败。

第三章：安全问题——CSRF防御

安全问题是重中之重！ CSRF（Cross-Site Request Forgery）攻击是一种常见的Web攻击，攻击者可以伪造用户的请求，执行一些恶意操作。

WordPress通过Nonce（Number used once）来防御CSRF攻击。

前端：使用wp_localize_script()将wp_create_nonce()生成的安全令牌传递给JavaScript。
后端：使用check_ajax_referer()验证安全令牌。

如果安全验证失败，check_ajax_referer()会直接wp_die()，结束脚本的执行。

第四章：admin-ajax.php的幕后工作

所有AJAX请求都发送到wp-admin/admin-ajax.php，那么这个文件到底做了什么呢？

简单来说，admin-ajax.php做了以下几件事：

加载WordPress核心文件：wp-load.php，这样才能使用WordPress的各种函数。
检查用户是否登录：根据用户是否登录，决定触发哪个action。
触发相应的action：do_action( 'wp_ajax_' . $_REQUEST['action'] ); 或 do_action( 'wp_ajax_nopriv_' . $_REQUEST['action'] );

第五章：实战演练——点赞功能

咱们来做一个简单的点赞功能，加深理解。

1. 前端代码 (js/like.js):

jQuery(document).ready(function($) {
  $('.like-button').click(function() {
    var post_id = $(this).data('post-id');
    var button = $(this);

    $.ajax({
      url: ajaxurl,
      type: 'POST',
      data: {
        action: 'like_post',
        post_id: post_id,
        security: my_ajax_object.security
      },
      success: function(response) {
        if (response.success) {
          button.text('Liked (' + response.data.likes + ')');
          button.prop('disabled', true); //点赞后禁用按钮
        } else {
          alert(response.data); //显示错误信息
        }
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.log(textStatus, errorThrown);
        alert('Something went wrong!');
      }
    });
  });
});

2. PHP代码 (functions.php):

function enqueue_like_script() {
  wp_enqueue_script( 'like-script', get_template_directory_uri() . '/js/like.js', array( 'jquery' ), '1.0', true ); //加载脚本到页脚
  wp_localize_script( 'like-script', 'my_ajax_object', array(
    'ajax_url' => admin_url( 'admin-ajax.php' ),
    'security' => wp_create_nonce( 'like_nonce' )
  ));
}
add_action( 'wp_enqueue_scripts', 'enqueue_like_script' );

add_action( 'wp_ajax_like_post', 'like_post' );
add_action( 'wp_ajax_nopriv_like_post', 'like_post' ); //允许未登录用户点赞，实际应用中需要考虑安全性

function like_post() {
  check_ajax_referer( 'like_nonce', 'security' );

  $post_id = intval( $_POST['post_id'] ); // 确保post_id是整数
  if ( empty( $post_id ) ) {
     wp_send_json_error( 'Invalid Post ID' );
     wp_die();
  }

  // 获取点赞数 (可以使用自定义字段或者一个单独的表)
  $likes = get_post_meta( $post_id, 'likes', true );
  $likes = ( ! empty( $likes ) ) ? intval( $likes ) : 0;
  $likes++;

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

  // 返回新的点赞数
  wp_send_json_success( array( 'likes' => $likes ) );

  wp_die();
}

// 在文章中显示点赞按钮
function display_like_button( $post_id ) {
  $likes = get_post_meta( $post_id, 'likes', true );
  $likes = ( ! empty( $likes ) ) ? intval( $likes ) : 0;
  echo '<button class="like-button" data-post-id="' . $post_id . '">Like (' . $likes . ')</button>';
}

3. 在文章模板中调用 display_like_button():

在你的 single.php 或者其他文章模板中，添加以下代码：

<?php display_like_button( get_the_ID() ); ?>

代码解释：

前端：点击点赞按钮，发送AJAX请求到 admin-ajax.php，传递 post_id 和安全令牌。
后端：验证安全令牌，获取 post_id，增加点赞数，更新自定义字段，返回新的点赞数。
显示：在文章页面显示点赞按钮，并显示当前点赞数。

表格总结：wp_ajax_* vs wp_ajax_nopriv_*

特性	`wp_ajax_*`	`wp_ajax_nopriv_*`
用户状态	已登录用户	未登录用户
安全性	相对较高，可以依赖用户权限	较低，需要更严格的安全验证
使用场景	后台管理、用户个人中心等需要登录的功能	前端公开功能，例如点赞、评论等
钩子名称举例	`wp_ajax_update_settings`	`wp_ajax_nopriv_submit_comment`

第六章：调试技巧

AJAX调试是个头疼的问题，这里分享几个技巧：

浏览器开发者工具：Chrome、Firefox等浏览器的开发者工具，可以查看AJAX请求的详细信息，包括请求头、请求体、响应头、响应体等。
console.log()：在JavaScript代码中使用console.log()输出变量的值，方便你调试前端代码。
error_log()：在PHP代码中使用error_log()将错误信息写入服务器日志，方便你调试后端代码。例如：error_log(print_r($_POST, true));
wp_die()调试：在PHP代码中使用wp_die()输出变量的值，并结束脚本的执行。例如：wp_die(print_r($_POST, true)); 注意：调试完成后要删除wp_die()，否则会影响正常功能。
WordPress调试模式：在wp-config.php中启用调试模式，可以显示更详细的错误信息。 define( 'WP_DEBUG', true );

第七章：高级用法

自定义返回数据格式：虽然wp_send_json_success()和wp_send_json_error()很方便，但有时候你需要自定义返回数据格式。可以使用wp_send_json()函数，返回任何你想要的数据格式。
处理文件上传：AJAX也可以处理文件上传。需要使用$_FILES数组获取上传的文件，并使用WordPress提供的文件上传函数进行处理。
使用REST API：WordPress REST API提供了更强大的API接口，可以更方便地处理AJAX请求。但是REST API的使用比较复杂，需要学习更多的知识。

结束语：AJAX的世界，任你翱翔

wp_ajax_*和wp_ajax_nopriv_*是WordPress AJAX的核心，掌握它们，你就可以构建各种各样的AJAX功能，提升用户体验，让你的WordPress网站更加强大。记住，安全第一！祝大家编程愉快！

WordPress源码深度解析之：`WordPress`的`AJAX`：`wp_ajax_`和`wp_ajax_nopriv_` `action`的实现。

发表回复取消回复

发表回复 取消回复

发表回复取消回复