正确的方法来链接Ajax URL

Question

在我的插件中,我有一些jQuery-Ajax代码处理表单数据,并在单击按钮后立即将其添加到数据库中.由于许多人的插件文件夹路径不同,我想知道是否有标准化指向数据处理PHP文件的URL.请参阅下面的示例:

$.ajax({
   type: "POST",
   url: "url_to_php_file_path.php",
   data: data,
   cache: false,
   success: function() {
      alert.("added");
   }
});

Answer 1

找出目标网址

在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,包括未登录(guest)用户.

告诉WordPress您的AJAX请求使用什么函数

你需要让WordPress知道哪个函数应该处理你的AJAX请求.

为此,您将创建一个自定义函数,并使用wp_ajax_*和wp_ajax_nopriv_*钩子注册它:

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钩子.