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?
Share Improve this question edited Dec 23, 2018 at 22:51 Krzysiek Dróżdż 25.6k9 gold badges53 silver badges74 bronze badges asked Dec 23, 2018 at 21:52 ScratchaScratcha 1152 silver badges7 bronze badges 01 Answer
Reset to default 2Well, 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_actionwp_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);
});
});