WordPress AJAX with Axios

时间:2017-10-07 作者:Ratko Solaja

我有一个简短的问题。有没有人设法在WordPress中使用Axios来执行AJAX请求(带有动作的wp\\U AJAX-调用函数)而不是REST API?您是如何做到的?

Axios似乎正在发送JSON,每当我尝试请求时,都会得到一个0。然而,使用jQuery-AJAX可以很好地工作。

2 个回复
SO网友:Arturo Gallegos

您可以使用FormData

例如:

let form_data = new FormData;
form_data.append(\'action\', \'myAction\');
form_data.append(\'first_name\', \'my first name\');
form_data.append(\'phone\', \'my phone\');

axios.post(myVars.ajax_url, form_data).then(function(response){
console.log(response.data);
})

SO网友:Karthik Thayyil

您需要以application/x-www-form-urlencoded格式发送数据。

axios发送json时$_REQUEST[\'action\'] wordpress未收到,它返回“0”。

要实现这一点,可以使用URLSearchParams API或Qs。

现在假设您的jQuery是这样的


var data = { action: \'get_names\', key2:\'value2\' ...... };

jQuery.post(\'/wp-admin/admin-ajax.php\', data )
.done( function (response) {
    console.log(response);
})
.fail( function (error) {
    console.log(error);
});
然后使用URLSearchParams,相应的Axios代码将


var params = new URLSearchParams();
params.append(\'action\', \'get_names\');
 params.append(\'key2\', \'value2\');
// params.append(\'key3\', \'value3\');
axios.post(\'/wp-admin/admin-ajax.php\', params )
.then( function (response) {
    console.log(response.data);
})
.catch( function (error) {
    console.log(error);
});
或者如果您正在使用Qs.js, 您需要在脚本之前将Qs排队


var data = { action: \'get_names\', key2:\'value2\' ...... }; 

axios.post(\'/wp-admin/admin-ajax.php\', Qs.stringify( data ))
.then( function (response) {
    console.log(data);
})
.catch(function (error) {
    console.log(error);
});
下面的链接将对此进行更详细的解释。

https://kt12.in/blog/wordpress-ajax-call-using-axios-js/

结束