How to handle WordPress Plugin Front-end AJAX Call

This question already has an answer here: What's the preferred method of writing AJAX-enabled plugins? (1 answer) Closed 6 years ago.

I'm developing a custom plugin. The plugin provides a shortcode that outputs some HTML to the front-end, wherever it is called. For the sake of example, this HTML includes a form button and textfield. When the button is clicked on the front-end, I want to use jQuery to make an AJAX call to fetch some data and populate the textfield. The data is calculated and returned from one of my plugins functions.

What request URL should I use for my AJAX request? I could create an ajax-handler.php script, place this inside my plugin directory, require the plugin php class, and access its functionality that way, but I am unsure if this is the best practice...

Is there a more efficient / native WordPress way of handling plugin AJAX requests on the front end?

This question already has an answer here: What's the preferred method of writing AJAX-enabled plugins? (1 answer) Closed 6 years ago.

I'm developing a custom plugin. The plugin provides a shortcode that outputs some HTML to the front-end, wherever it is called. For the sake of example, this HTML includes a form button and textfield. When the button is clicked on the front-end, I want to use jQuery to make an AJAX call to fetch some data and populate the textfield. The data is calculated and returned from one of my plugins functions.

What request URL should I use for my AJAX request? I could create an ajax-handler.php script, place this inside my plugin directory, require the plugin php class, and access its functionality that way, but I am unsure if this is the best practice...

Is there a more efficient / native WordPress way of handling plugin AJAX requests on the front end?

• plugins
• ajax
• front-end

Share Improve this question edited Dec 23, 2018 at 22:51 Krzysiek Dróżdż 25.6k99 gold badges5353 silver badges7474 bronze badges asked Dec 23, 2018 at 21:52 ScratchaScratcha 11522 silver badges77 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

Well, yes - there is a lot better way of doing this.

First of all, you should never do any direct requests to files inside wp-content directory. Securing and hardening WordPress properly is much harder, if some plugin does such requests.

And of course there is no need of doing them.

WP has built-in mechanism for AJAX requests. You can read full docs here: https://codex.wordpress/AJAX_in_Plugins

All your AJAX requests should be sent to wp-admin/admin-ajax.php. This way you can process them efficiently using these hooks:

• wp_ajax_my_action
• wp_ajax_nopriv_my_action

So somewhere in your plugin PHP file you do:

// Enqueue your JS file
function my_enqueue($hook) {    
    wp_enqueue_script( 'ajax-script', plugins_url( '/js/my-script.js', __FILE__ ), array('jquery') );

    // in JavaScript, object properties are accessed as ajax_object.ajax_url
    wp_localize_script( 'ajax-script', 'My_Ajax_bject',
        array( 'ajax_url' => admin_url( 'admin-ajax.php' )
    );
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );


// AJAX request handler
function my_action() {
    global $wpdb;  // you can use global WP variables and so on
    $whatever = intval( $_POST['whatever'] );
    $whatever += 10;
    echo $whatever;
    wp_die();
}
add_action( 'wp_ajax_my_action', 'my_action' );

And in your JS file:

jQuery(document).ready(function($) {
    var data = {
        'action': 'my_action',
        'whatever': 1
    };

    $.post(ajax_object.ajax_url, data, function(response) {
        alert('Got this from the server: ' + response);
    });
});