确定目标 URL
在 WordPress 中,所有 AJAX 请求都必须发送到以下 URL:
http://www.example.com/wp-admin/admin-ajax.php
您不应直接向插件或主题目录中的文件发出 AJAX 请求。
另外,不要对上面的 URL 进行硬编码,而应该使用以下函数来构造 URL:
<script>
ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>
除了上述之外,您还可以使用wp_localize_script(),但这不是必需的,上面的也可以。
注意:不必担心“admin”部分,该 URL 是适用于所有用户(包括未登录(来宾)用户)的正确 URL。
告诉 WordPress 使用什么函数来处理您的 AJAX 请求
您需要让 WordPress 知道哪个函数应该处理您的 AJAX 请求。
为此,您将创建一个自定义函数,并使用wp_ajax_*
and wp_ajax_nopriv_*
hooks:
add_action('wp_ajax_mycustomfunc', 'mycustomfunc'); // Logged-in users
add_action('wp_ajax_nopriv_mycustomfunc', 'mycustomfunc'); // Guest users
function mycustomfunc() {
$whatever = esc_html($_POST['whatever']);
echo 'It works: '.$whatever;
exit; // This is required to end AJAX requests properly.
}
不要忘记在 AJAX 请求中指定“mycustomfunc”
最后,以下是如何发出正确的 AJAX 请求:
(function ($) {
$(document).ready(function () {
var my_data = {
action: 'mycustomfunc', // This is required so WordPress knows which func to use
whatever: "yes it is" // Post any variables you want here
};
jQuery.post(ajax_url, my_data, function(response) {
alert('Got this from the server: ' + response);
});
});
})(jQuery);
将其全部结合起来
如果您必须将所有内容放入一个文件中,请按以下步骤操作:
// Register my custom function for AJAX processing
add_action('wp_ajax_mycustomfunc', 'mycustomfunc'); // Logged-in users
add_action('wp_ajax_nopriv_mycustomfunc', 'mycustomfunc'); // Guest users
function mycustomfunc() {
$whatever = esc_html($_POST['whatever']);
echo 'It works: '.$whatever;
exit; // This is required to end AJAX requests properly.
}
// Inline JavaScript
add_action('wp_footer', 'my_inline_js');
function my_inline_js() { ?>
<script>
// Set the "ajax_url" variable available globally
ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>";
// Make your AJAX request on document ready:
(function ($) {
$(document).ready(function () {
var my_data = {
action: 'mycustomfunc', // This is required so WordPress knows which func to use
whatever: "yes it is" // Post any variables you want here
};
$.post(ajax_url, my_data, function(response) { // This will make an AJAX request upon page load
alert('Got this from the server: ' + response);
});
});
})(jQuery);
</script>
<?php
}
注:对于ajax_url
部分,你可以使用wp_localize_script()而不是手动设置它,但它不太灵活,因为它需要指定现有的排队脚本,而您可能没有。
注意:此外,为了将内联 JavaScript 手动输出到页面中,wp_footer
钩子是正确使用的钩子。如果使用wp_localize_script()那么你会使用wp_enqueue_scripts改为钩子。