时间戳

首页 > 解决方案 > Wordpress POST 请求使用 XMLHttp 和 Axios 失败，但适用于 jQuery。有什么不同？

jquery - Wordpress POST 请求使用 XMLHttp 和 Axios 失败，但适用于 jQuery。有什么不同？

问题描述

我正在尝试在我所有的 Wordpress 网站上替换 jQuery。

我有一个简单的处理程序example_handler，它应该返回“Hello World！”

function example_handler() {

  echo 'Hello World!';

  wp_die();

}

add_action('wp_ajax_nopriv_example_handler','example_handler');
add_action('wp_ajax_example_handler','example_handler');

当我使用jQuery时，我得到了预期的响应：

const data = {action: 'example_handler'}

jQuery.post(ajax.url,data,r => {console.log(r);});

使用Axios时出现 400 错误：

axios.post(ajax.url, {
  action: 'bp_contact_form_handler'
})
.then(r => {
  console.log(r);
})
.catch(e => {
  console.log(e);
});

当我使用XMLHttp时，出现 400 错误：

const request = new XMLHttpRequest();

request.open('POST',ajax.url,true);
request.setRequestHeader("Content-Type", "application/json");

request.onload = () => {

  const response = JSON.parse(request.response);

  console.log(request.response);

};

request.send(JSON.stringify(data));

标签： jquerywordpressxmlhttprequestaxios

解决方案

我相信这是在这里回答的重复：https ://wordpress.stackexchange.com/questions/282163/wordpress-ajax-with-axios 。使用Qs.js，以下代码应该适用于 Axios 和 WordPress。javascript 变量通常也ajaxurl不会ajax.url绑定到/wp-admin/admin-ajax.php. 您可以尝试将其直接指向 admin-ajax.php 以排除潜在问题。

var data = { 
   action: 'bp_contact_form_handler' 
};

axios.post( ajaxurl, Qs.stringify( data ) )
.then(r => {
   console.log(r);
})
.catch(e => {
  console.log(e);
});

推荐阅读