Lingua Italiana
Two examples of Ajax and WordPress. The first with jQuery and the second without jQuery.
The code needed to implement Ajax on WordPress is short, a few lines.
Our Ajax request can be destined to a Backend administrative page, for a plugin for example, or to a Frontend page.
In both cases Ajax improves the speed of execution, compared to other methods.
Ajax, Backend and Frontend testing is embedded within MinimumPlugin ( demo ).
Whether it’s Backend or Frontend, two code snippets are always essential:
– One mixed snippet, in html and javascript, to send the ajax request to the server and, subsequently, to manage the response that arrives.
– One php function that performs the processing and sends the response.
<div class="wrap">
<hr class="wp-block-separator">
<h4>Test Ajax Backend</h4>
<input type="text" name="mpAjax_BKT" id="mp_AjaxBKT" title="Background Ajax Test" placeholder="Input something">
<button id="mpAjax_BKcall" class="button button-primary">Press me for Test</button>
<p id="mpAjax_BKR"></p>
</div>Our test expects an input field id = “mp_AjaxBKT” to type anything,
one button id = “mpAjax_BKcall” to send our content to the server
and one paragraph with id = “mpAjax_BKR” which will contain the response from the server.
<script>
jQuery(document).ready(function(){
jQuery('#mpAjax_BKcall').click(function(){
jQuery.ajax({
url: ajaxurl,
method: 'POST',
data: {
'action':'mp_ajaxBK',
'mp_AjaxBKT': mp_AjaxBKT.value
},
success: function(response){ mpAjax_BKR.innerHTML = response;},
error: function(){ alert('ajax error. See the Console Log!'); }
});
});
});
</script>The script starts when the Press me button is pressedjQuery('#mpAjax_BKcall').click(function(){
which instantiates the jQuery methods for ajax.url: ajaxurl, wp entry point address for ajax. ajaxurl is an address that WordPress automatically sets on all administrative pages. Ex: var ajaxurl = '/wp-admin/admin-ajax.php' 'action':'mp_ajaxBK', action with which WP will call our php function mp_AjaxBKG()
'mp_AjaxBKT': mp_AjaxBKT.value is what we typed in the input field. WP will get the value with $_POST['mp_AjaxBKT']; success: function(response){ mpAjax_BKR.innerHTML = response;}, writes what we typed in the paragraph we predicted and left without content. Ajax is ok.
error: function(){ alert('ajax error. See the Console Log!'); in case of ajax error a warning window appears.
add_action( 'wp_ajax_mp_ajaxBK', 'mp_AjaxBKG' );
function mp_AjaxBKG(){
( $ajaxInputBKG = sanitize_text_field($_POST[ 'mp_AjaxBKT' ])) OR
( wp_die( 'No input or No valid input.' ) );
echo $ajaxInputBKG;
exit();
}We need to link the 'mp_ajaxBK' action sent by Javascript with our php mp_AjaxBKG () function.
We do this using one of the “Hooks” that feature WordPress.
The admin-ajax.php file we reach through ajaxurl examines the action 'mp_ajaxBK' and using add_action() directs the WordPress stream to the mp_AjaxBKG() function which performs the processing.
A rather simple processing. It filters the value of the input field to avoid invalid contents and sends the same content, which becomes response of the server and will be placed in the HTML element we have prepared. The function closes with exit(); necessarily to avoid unpredictable errors.
<h4>Test Ajax FrontEnd</h4>
<input type="text" name="mpAjax_FT" id="mp_AjaxFT" title="FrontEnd Ajax Test" placeholder="Input something">
<button id="mpAjax_Fcall" class="button button-primary">Press me for Test</button>
<p id="mpAjax_FR"></p>Html in the Frontend is the same as in the Backend.
Only the class names of the html tags change.
<?php
$nonce = wp_create_nonce( 'MinimumPlugin' ); /* Create nonce */
$ajaxURL = admin_url( 'admin-ajax.php', 'relative' ); /* get the ajax input address in wp */
?>
<script>
var mpF_nonce = '{$nonce}';
var mpF_axUrl = '{$ajaxURL}';
document.getElementById('mpAjax_Fcall').addEventListener("click", function(){
function AjaxVar(){var xhr; if(window.ActiveXObject) {xhr = new ActiveXObject;} else {xhr = new XMLHttpRequest;} return xhr;}
var fd = new FormData();
fd.append( 'action', 'mp_ajaxF' );
fd.append( 'ajax_nonce', mpF_nonce );
fd.append( 'mp_AjaxFT', mp_AjaxFT.value );
var xhr = AjaxVar();
xhr.addEventListener("load", Complete);
xhr.addEventListener("error", Err);
xhr.addEventListener("abort", Abor);
xhr.open('POST', mpF_axUrl);
xhr.send(fd);
function Complete(){ document.getElementById('mpAjax_FR').innerHTML = xhr.responseText; }
function Err(){ document.getElementById('mpAjax_FR').innerHTML = document.getElementById('mpAjax_FR').innerHTML + '<br>ajax Error ... ' + xhr.status + ' ' + xhr.statusText; }
function Abor(){ document.getElementById('mpAjax_FR').innerHTML = document.getElementById('mpAjax_FR').innerHTML + '<br>ajax Abort ... ' + xhr.status + ' ' + xhr.statusText; }
});
</script>For the Frontend we need 2 more php lines to set 2 variables to pass to Javascript. Indispensable. $nonce = wp_create_nonce( 'MinimumPlugin' );
Ajax in Frontend requires more precautions than the Backend, so let’s create a WordPress “nonce” .$ajaxURL = admin_url( 'admin-ajax.php', 'relative' );
WP does not automatically track its entry point for Ajax in the Frontend.
Manually set the address of the admin-ajax.php file.
In most cases the Ajax call is done with jQuery which WP always loads. With jQuery the code is smaller, but in some cases you will need native javascript, which, however, is always a bit faster.var mpF_nonce = '{$nonce}';
var mpF_axUrl = '{$ajaxURL}';
Passing “nonce” and “url” to Javascript ( Heredoc syntax).document.getElementById('mpAjax_Fcall').addEventListener(...)
Listener for the “click” on the “Press me” submit button.function AjaxVar()
Returns an XMLHttpRequest o ActiveXObject element, based on the user’s browser.var xhr = AjaxVar(); var fd = new FormData();
fd.append( 'action', 'mp_ajaxF' );
fd.append( 'ajax_nonce', mpF_nonce );
fd.append( 'mp_AjaxFT', mp_AjaxFT.value );
Instantiate a Javascript FormData object.
We will be able to read the values sent with the usual php $_POST[] statement.
As in the Backend we have to send the ‘action’, this time reserved for the Frontend only,
We also send the value of the input field.
Finally we also send the ‘nonce’ to perform a server side regularity check.
xhr.addEventListener("load", Complete); // Ajax complete
xhr.addEventListener("error", Err); // Ajax Errors
xhr.addEventListener("abort", Abor); // Ajax abort
These are listeners that are activated after the Ajax request and are intended to handle possible responses. If everything is ok, the Complete function will write the input previously inserted in the appropriate html element.xhr.open('POST', mpF_axUrl);Finally the actual sending of the Ajax request.
xhr.send(fd);
The three FormData values are sent asynchronously, with the POST method, to the url mpF_axUrl . The browser waits for a response from the server.
add_action( 'wp_ajax_nopriv_mp_ajaxF', 'mp_AjaxFD');
Register an action: mp_ajaxF valid for users who have not been logged in.add_action('wp_ajax_mp_ajaxF', 'mp_AjaxFD');
Record the same action, mp_ajaxF for users who have logged in.
Without this second Frontend Ajax registration it will not work for log in users.function mp_AjaxFD() {
$nonce = sanitize_text_field( $_POST[ 'ajax_nonce' ]);
if( !wp_verify_nonce( $nonce, 'MinimumPlugin' )){
wp_die( '403 forbidden', 403 );
}
( $ajaxInputF = sanitize_text_field($_POST[ 'mp_AjaxFT' ])) OR ( wp_die( 'No input or No valid input.' ));
echo $ajaxInputF;
exit();
}
The processing is the same as the Backend but this time the nonce is examined, with wp_verify_nonce. If invalid, the Ajax response is forbidden and WP also sets a corresponding header .
