You Don’t Need “wp_localize_script()” to Get “admin-ajax.php”

The most common method to use AJAX in WordPress is using admin-ajax.php + WordPress hook system.

And one of the recommended method to get this file URL is by using wp_localize_script(). This method is explained in details in my other tutorial WordPress AJAX for Beginners.

However, there is an alternative method.

wp.ajax.post( action, data );

WordPress actually have a neat AJAX utility, which is basically a wrapper for jQuery’s ajax APIs.

You can read the source code in wp-includes/js/wp-util.js.

To make it easier to explain, I just going to give you a simple example for comparison:

Using Localize Script:

/* Load Script */
add_action( 'wp_enqueue_scripts', function(){
    $url = trailingslashit( plugin_dir_url( __FILE__ ) );
    wp_register_script( 'my_ajax_script', $url . 'script.js', array( 'jquery' ), '0.1.0', true );
    wp_localize_script( 'my_ajax_script', 'my_ajax_url', admin_url( 'admin-ajax.php' ) );
} );

/* AJAX Callback */
add_action( 'wp_ajax_my_ajax_action', function(){
    $first_name = isset( $_POST['first_name'] ) ? $_POST['first_name'] : 'N/A';
    $last_name = isset( $_POST['last_name'] ) ? $_POST['last_name'] : 'N/A';
    echo "Your name is {$first_name} {$last_name}";
    wp_die();
} );
jQuery( document ).ready( function( $ ){

    $.ajax({
        method : 'POST',
        url    : my_ajax_url,
        data   : {
            action     : 'my_ajax_action', // "wp_ajax_*" action hook
            first_name : 'John',
            last_name  : 'Cena',
        },
    })
    .done( function( response ) {
        alert( response );
    })
    .fail( function() {
        alert( "error" );
    })
});

Pretty simple basic example, and this is how to do it using wp.ajax:

/* Load Script */
add_action( 'wp_enqueue_scripts', function(){
    $url = trailingslashit( plugin_dir_url( __FILE__ ) );
    wp_register_script( 'my_ajax_script', $url . 'script.js', array( 'jquery', 'wp-util' ), '0.1.0', true );
} );

/* AJAX Callback */
add_action( 'wp_ajax_my_ajax_action', function(){
    $first_name = isset( $_POST['first_name'] ) ? $_POST['first_name'] : 'N/A';
    $last_name = isset( $_POST['last_name'] ) ? $_POST['last_name'] : 'N/A';
    $response = "Your name is {$first_name} {$last_name}";
    wp_send_json_success( $response );
} );
/* AJAX */
jQuery( document ).ready( function( $ ){

    wp.ajax.post( 'my_ajax_action', {
        first_name : 'John',
        last_name  : 'Cena',
    } )
    .done( function( response ) {
        alert( response );
    } )
    .fail( function() {
        alert( "error" );
    } );

});

What’s Different?

1. No Need for Localize Script to get admin ajax.

In my opinion it’s easier and cleaner method. All we need to do is to load “wp-util” as our script dependency.

2. Response in JSON

It is designed for JSON, and to use in combo with:

I think It’s less flexible but for most use case we can easily replace our jQuery AJAX with cleaner wp.ajax. But we can also use wp.ajax.send that offer more flexibility.

3. Streamlined Method

Of course, WordPress is updated regularly, So, we will also get improvements (probably also new features) in the future for using this method.

Have you use wp.ajax? If you are not using it yet, are you going to update your code to use wp,ajax? Let me know what you think in the comments 🙂

2 Comments

  1. Spencer

    > Of course, WordPress is updated regularly, So, we will also get improvements (probably also new features) in the future for using this method.

    This is the biggest one for me. It lets WordPress automatically change how they handle AJAX without needing to update any Javascript on your side. If they switch to sending all of these requests through the REST API instead of admin-ajax.php you’re all set without making any changes.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *