0

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?

0

1 Answer 1

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.org/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);
    });
});
4
  • Does this apply to public requests on the front end ? It seems odd that these front-end requests would be sent to 'wp-admin/admin-ajax.php ?
    – Scratcha
    Dec 24, 2018 at 1:39
  • @Scratcha yes, it applies to ALL Ajax requests. Dec 24, 2018 at 8:08
  • Can you help me out here? wordpress.stackexchange.com/q/359762/52859 Feb 29, 2020 at 17:13
  • Was checking it again now and I see that OP is asking to use the in the frontend, so I think the add_action( 'admin_enqueue_scripts', 'my_enqueue' ); should be changed to add_action( 'wp_enqueue_scripts', 'my_enqueue' ); Apr 8, 2021 at 11:53

Not the answer you're looking for? Browse other questions tagged or ask your own question.