如何在Axios的POST请求中设置post action？

嘿，这个问题我之前也踩过坑！核心原因是jQuery和Axios默认发送POST数据的格式不一样，而WordPress的admin-ajax.php只认表单编码的数据，咱们一步步来搞定它：

为什么会报错？ #

jQuery的$.post方法默认会把参数序列化为application/x-www-form-urlencoded格式（就是普通表单提交的键值对格式），但Axios默认发送的是application/json格式的JSON字符串。WordPress的AJAX接口根本不处理JSON格式的POST数据，所以直接返回400错误啦。

两种解决方案 #

方案1：用URLSearchParams模拟jQuery的提交格式 #

这是最直接的方法，不用额外依赖：

// 构造表单格式的参数
const formData = new URLSearchParams();
formData.append('action', 'add_foobar');
// 如果你的data是对象，要转成字符串传给后端，后端再用json_decode解析
formData.append('data', JSON.stringify({ foobarid: 'foobarid' }));

axios.post(ajax_object.ajax_url, formData)
  .then(response => {
    alert('Message successfully sent');
    // 建议打印返回数据，看看后端实际响应内容
    console.log('服务器返回:', response.data);
  })
  .catch(e => {
    alert('Failed to send message: ' + e.message);
    // 这里打印完整错误对象，能看到服务器返回的具体错误信息
    console.error('请求错误详情:', e);
  });

方案2：全局配置Axios，统一用表单编码 #

如果你的项目里有很多AJAX请求，可以一次性配置Axios的默认行为，搭配qs库来序列化数据：

// 先安装qs库：npm install qs --save
import qs from 'qs';

// 设置Axios默认请求头和序列化方式
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = [function(data) {
  return qs.stringify(data);
}];

// 之后发送请求就和jQuery写法差不多了
axios.post(ajax_object.ajax_url, {
  action: 'add_foobar',
  data: { foobarid: 'foobarid' }
})
.then(response => {
  alert('Message successfully sent');
})
.catch(e => {
  alert('Failed to send message: ' + e.message);
});

额外注意事项 #

• 确保后端已经正确注册了add_foobar action：

  // 登录用户可访问
  add_action('wp_ajax_add_foobar', 'handle_add_foobar');
  // 未登录用户可访问（如果需要的话）
  add_action('wp_ajax_nopriv_add_foobar', 'handle_add_foobar');
  
  function handle_add_foobar() {
    // 解析data参数，如果是JSON字符串的话
    $data = json_decode($_POST['data']);
    // 处理逻辑...
    wp_send_json_success('操作成功');
  }
  

• 如果你的data是简单字符串，直接传值就行，不用JSON序列化
• 遇到问题时，一定要看浏览器控制台的错误详情，e.response.data里通常会有WordPress返回的具体错误提示

内容的提问来源于stack exchange，提问作者sazr