问题描述:
在开发 WordPress 主题或插件时,经常需要通过 admin-ajax.php 处理前端 AJAX 请求。实际开发中,我们可能会遇到两种常用的请求方式:
1:使用 axios.post 直接传递 JSON 对象
axios.post('/wp-admin/admin-ajax.php', {
action: 'confirm_delivery',
order_id: order.id,
nonce: this.nonce
});
2:使用 fetch 配合 FormData 传递数据:
const formData = new FormData();
formData.append('action', 'confirm_delivery');
formData.append('order_id', order.id);
formData.append('nonce', this.nonce);
fetch('/wp-admin/admin-ajax.php', {
method: 'POST',
body: formData
});
这两种方式都能实现数据传递,但在数据格式、后端处理逻辑、兼容性等方面存在显著差异。
数据格式与传递方式
axios.post
axios 会自动将传入的对象({ action: ‘confirm_delivery’, … })转为 JSON 字符串,并设置请求头 Content-Type: application/json。
后端通过 file_get_contents(‘php://input’) 读取 JSON 字符串,再用 json_decode 解析才能获取数据:
// 后端处理 axios 请求的方式
$data = json_decode(file_get_contents('php://input'), true);
$order_id = $data['order_id']; // 获取订单ID
$action = $data['action']; // 获取 action
fetch 配合 FormData
FormData 会将数据编码为 multipart/form-data 格式(类似表单提交的 enctype=”multipart/form-data”),请求头自动设为 Content-Type: multipart/form-data; boundary=…。
后端可直接通过 $_POST 全局变量获取数据(WordPress 推荐方式):
// 后端处理 FormData 请求的方式(更简单)
$order_id = $_POST['order_id']; // 直接从 $_POST 获取
$action = $_POST['action']; // 直接获取 action
与 WordPress admin-ajax.php 的兼容性
WordPress 的 admin-ajax.php 对请求格式有隐性要求:
必须通过 action 参数指定处理函数(如 action: ‘confirm_delivery’ 对应 wp_ajax_confirm_delivery 钩子)。
优先识别 $_POST 中的数据(这是 WordPress 处理 AJAX 的标准方式)。
因此:fetch + FormData 更兼容:因为数据直接进入 $_POST,后端无需额外解析 JSON,可直接使用 $_POST[‘action’] 和 $_POST[‘order_id’],符合 WordPress 原生逻辑。
而axios.post 需要额外处理:因为数据在 JSON 中,后端必须手动解析 php://input 才能获取 action 和其他参数,否则 WordPress 会找不到对应的处理函数(导致返回 0 错误)。
使用复杂度
axios 的优势
自动转换 JSON 数据,无需手动处理格式:
// 直接传对象,axios 自动转 JSON
axios.post('/wp-admin/admin-ajax.php', {
action: 'confirm_delivery',
order_id: 123,
nonce: 'xxx'
});
fetch 的注意点
使用 FormData 时需要手动添加字段,稍显繁琐:
const formData = new FormData();
formData.append('action', 'confirm_delivery');
formData.append('order_id', 123); // 必须手动 append 每个字段
formData.append('nonce', 'xxx');
fetch('/wp-admin/admin-ajax.php', {
method: 'POST',
body: formData
});
响应处理
axios:自动将后端返回的 JSON 字符串解析为 JavaScript 对象,直接使用 response.data 即可:
axios.post(...)
.then(response => {
console.log(response.data.success); // 直接访问解析后的数据
});
fetch:需要手动调用 response.json() 解析响应(默认返回 Response 对象):
fetch(...)
.then(response => response.json()) // 必须手动解析
.then(data => {
console.log(data.success);
});
以上,我觉得优先用 fetch + FormData,因为它完全兼容 WordPress admin-ajax.php 的数据处理逻辑(直接使用 $_POST),减少后端解析步骤。