While in WordPress admin area.. the variable named ajaxurl is available for javascript scripts to use for the url for ajax. Every call must at the very least have an “action” data property passed to WordPress in order for it to know which function will be used on the back-end to complete the ajax request.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// when in the WordPress admin area. the variable "ajaxurl" is available that // points to /wp-admin/admin-ajax.php which handles all ajax requests. // if the user is not logged in then the ajaxurl is not automatically passed. // also wp_ajax_nopriv action must also have the php ajax function tied to it // in case the user that is visiting is not logged in. var datasent={ 'action':'method_that_handles_the_ajax_request', 'address':'555 street' }; // in this example we manually set a ajaxurl in case the user isn't logged in. var ajaxurltowp=site_vars.ajaxurl; // passed in from localize wp script $.post(ajaxurltowp, datasent,function(response){ // response is what is sent back from the server for the ajax request. }); |
The associated php that would be needed to process above :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php function handle_request(){ $address=$_POST["address"]; // grab field sent via ajax //do something here // all functions that handle ajax must die() at the end of the function. die(); } //adding action assuming not in a namespace. add_action('wp_ajax_method_that_handles_the_ajax_request','handle_request'); // adding action for visitors who are no logged in add_action('wp_ajax_nopriv_method_that_handles_the_ajax_request','handle_request'); |
Any ajax request must be handles by a function which has to be added via add_action
Note that any action you specify in the ‘action’ field for the data sent to the server will have ‘wp_ajax_’ prepended to the actions name.
Also need to bind to the action prefix ‘wp_ajax_nopriv’ so that the ajax will still work for visitors who are not logged in.
So the action ‘method_that_handles_the_ajax_request’ will have to be added in php as ‘wp_ajax_method_that_handles_the_ajax_request’ as seen in the php snippet.
If the action can not be found by admin-ajax.php the response returned from the ajax request will be an integer of zero ( 0 ).
If you created an ajax action method properly and you keep receiving a 0 response…confirm that your ajax action method was added.
|
1 2 3 4 5 |
//if were in a namespace would have to do the following: add_action('wp_ajax_method_that_handles_the_ajax_request',__NAMESPACE__.'\\handle_request'); //if were in a class would have to do the following: add_action('wp_ajax_method_that_handles_the_ajax_request',array($this,'handle_request')); |
Any function in php that handles a ajax request MUST end with die();
Within the php function, any post variable that is passed via the ajax data field, in our case the ‘address’ or ‘action’ field, is available via $_POST[“address”] or $_POST[“action”]
Used to add data to javascript that is normally only available on server side. Has to be used after an enqueue of a script and use the same “handle”. It will make the variables passed via localize_script available to the rest of the javascript that was enqueued.
Typically, this is used for nuances
Example of adding the nuances
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php // Register the script wp_register_script( 'the_handle', 'path/to/myscript.js' ); // Localize the script with new data // ajaxurl is passed in manually in case the visitor // is not logged in - wordpress does not automatically // populate ajaxurl if the user is not logged in $sites_variables = array( 'site_nonce' => wp_create_nonce('site_nonce'), 'ajaxurl'=> admin_url( 'admin-ajax.php' ) ); wp_localize_script( 'the_handle', 'site_vars', $sites_variables ); // Enqueued script with localized (nonce ) data. wp_enqueue_script( 'the_handle' ); |
Another way to add it when there are times where an additional script isn’t needed could be done in the following way.
|
1 2 3 4 5 6 7 8 |
function add_nonce_variable_in_javascript_to_admin_head_area(){ ?> <script type="text/javascript"> var site_variables = { 'site_nonce':<?php echo json_encode(wp_create_nonce("site_nonce")); ?> }; </script><?php } add_action( 'admin_head', __NAMESPACE__ . '\\add_nonce_variable_in_javascript_to_admin_head_area' ); |
Now we can update the javascript to use the nonce to pass back to WordPress to check for nonce validity.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// "site_nonce" is populated from the sites_vars variable passed from wp_localize_script var datasent={ "action":"method_that_handles_the_ajax_request", "address":"555 street", "site_nonce":sites_vars.site_nonce; }; $.post(ajaxurl, data_sent,function(response){ // response is what is sent back from the server for the ajax request. }); |
Now that the nonce is created and is being passed from javascript to WordPress.. we setup below in php in the action that the ajax requests to process it’s integrity.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
if( !isset($_POST['site_nonce']) || !wp_verify_nonce($_POST['site_nonce'], 'site_nonce')){ // nonce is missing or is bad. Cancel request die('Permission check failed'); } //$_POST['site_nonce'] has to be passed in first parameter as it is POST name we gave it below: // site_nonce has to be passed since it was // the handle we used when creating the nonce // i.e. wp_create_nonce('site_nonce'); |
Good notes for ajax usage: https://developer.wordpress.org/plugins/javascript/enqueuing/
check_ajax_referer( 'nonce' ); This function will check nonce and if it fails will automatically kill the action it was ran within
wp_send_json() will send back appropriate header and json back to javascript as well as wp_die() for the action it was called in.