With the latest update to WordPress’ API calls now using REST for common functionality, the ability to call asynchronous functions is easier than it has ever been. However, within the development of a plugin, there is still often a need to get data from a PHP function while working in JavaScript, or have something update after the user makes a choice or submits something. For those situations, AJAX calls are frequently the best suited.
Normally, making an AJAX call (when using jQuery) is as easy as calling the $.ajax() function in some JavaScript code and having a backend pass data to it. It usually requires knowing something about the backend or function to handle the data and then acting on it somehow.
However, since WordPress already uses AJAX calls internally, it doesn’t make sense to write extra code to pass data and then write even more to coordinate everything WordPress can handle some of those tasks with its own wp_ajax (action) function that comes not only with the benefit of having WordPress make the calls for you from the server-end, but also allows you to register functions within existing action hooks.
Example:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery(document).ready( function($) { | |
| var data = { | |
| 'action': ‘example_function’, | |
| ‘some_value’: 1234 | |
| }; | |
| $.post(ajaxurl, data, function(response) { | |
| console.log('Got this from the server: ' + response); | |
| }); | |
| }); |
Starting with the above code in a file named “test.js”, the script would first need to be enqueued before it could be used within a plugin. While doing that, we can also define the action as the trigger for the call.
Note: WordPress creates a global ajaxurl variable for JavaScript that contains the file to be called for logged-in users’ AJAX functionality. Other variables can be added through the wp_localize_script function. This is also needed with unauthenticated users on something like a front-end where the variable would not be defined already by WordPress.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| // Assume this is part of a larger plugin project | |
| // Enqueue our AJAX script | |
| // Tell WordPress to make sure jQuery is also loaded as part of our dependency array | |
| wp_enqueue_script( 'ajax-script', plugins_url( '/js/test.js', __FILE__ ), array('jquery') ); | |
| // Add 'wp_ajax' tied to the "example_function" action | |
| add_action( 'wp_ajax_example_function', 'example_function_callback' ); | |
| // Callback function for the wp_ajax_example_function action | |
| function example_function_callback() { | |
| // Echo back the some_value passed to it | |
| echo $_POST["some_value"]; | |
| // Die gracefully to guarantee proper return response | |
| wp_die(); | |
| } | |
| ?> |
With the named “example_function” above, the same ‘action’ set in the AJAX call will look for and handle the hooked function. AJAX calls with the ‘action’ set to “example_function” will be routed to the response from the function for that same action, too. Without needing to write or re-configure settings, WordPress will do all the handling using its own internal organizing and AJAX calls. However, while this shows how to use this within a plugin (and thus a user will be logged in to use it), there is also a version for unauthenticated users called wp_ajax_nopriv_(action) that works the same way for more front-end usage.
Digital Ephemera 