链接Ajax URL的正确方法

In my plugin, I have some jQuery-Ajax code that processes form data and adds it to the database as soon as the button is clicked. Since many people have a different path to their plugin folder, I was wondering if there was anyway to standardize the URL that points to the data processing PHP file. See my example below:

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

Firstly, all ajax calls should be registered through wp_ajax

add_action('wp_ajax_add_something', 'add_something');

This code should be in your plugin file, along with the function add_something

function add_something(){
    //logic
}

Then in the front end, you should be using the ajaxurl global variable supplied by Wordpress.

$.ajax({
    type: 'POST',
    url: ajaxurl,
    data: { 
        action: 'add_something', //this was defined earlier
        data: 'other data here'
    },
    success: function(data){
        //do whatever with the callback
    }
});

This negates the need to explicitly declare any URL, and as such, is the proper way to perform ajax calls in Wordpress.

Figuring out the target URL

In WordPress, all AJAX requests must be made to the following URL:

http://www.example.com/wp-admin/admin-ajax.php

You should not make an AJAX request directly to a file residing in the plugin or theme directory.

Also, do not hard-code the above URL, instead you should use the following function to construct the URL:

<script>
    ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>

Alternatively to the above, you can use wp_localize_script(), but this is not required, the above is fine too.

Note: Don't worry about the "admin" part, this URL is the correct one to use for all users, including non-logged-in (guest) users.

Tell WordPress what function to use for your AJAX request

You need to let WordPress know which function should process your AJAX request.

For that purpose you'll create a custom function, and register it using the 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.
}

Don't forget to specify "mycustomfunc" in the AJAX request too

Finally, here is how you would make a proper AJAX request:

(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);

Combine it all

If you had to put it all into one file, here's how you'd do it:

// 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
}

Note: For the ajax_url part, you could use wp_localize_script() instead of setting it manually, but it is less flexible as it requires to specify an existing enqueued script, which you might not have.

Note: Also, for outputting inline JavaScript manually into a page, the wp_footer hook is the correct one to use. If using wp_localize_script() then you would use the wp_enqueue_scripts hook instead.