Using AJAX With PHP on Your WordPress (The right way)

Posted on

AJAX (Asynchronous JavaScript and XML) is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. With that said you could use Javascript in conjunction with PHP or other languages (in this case of course it will be PHP)  🙂
Before starting to making a call to ajax we might need to understand a little bit of:

  1. How are you making the Ajax calls?

  2. How are the files involves in WordPress that can be update and how is the process.

Ajax calls.

In this post i will assume that we all know the existence of jQuery. Which will allow us to make things a little easier to understand.
With jQuery you have one function that can be called like this:

$.ajax({
type : 'post',
url : ajaxloading.ajaxurl,
data : {
action : 'sort_results',
parameter1: $value1
},
beforeSend : function() {
//some logic that will prevent for example execute twice the button
// you can disabled the button or showing a loading gif.
},
success : function( response ) {
// display the button again or hide the loading gif.
}
});

In this example we call ajax method which perform an asynchronous HTTP (Ajax) request. In this case we will do a ‘POST’ call.

We can pass parameters in the data array, which will be handled by the called method.

. One of this parameter needs to be the ‘action’ will be explaining later the purpose of this.
Lastly, we setup a ‘success’ method that will be the one which handles the return of the call and do some logic in the page.

See also  Cultivating Innovation: Fostering Creativity in Technology Companies

WordPress files

WordPress themes use functions.php or the theme functions file as a template. It acts as a plugin and loads automatically on both admin and front-end pages of a WordPress site. This file defines the method called from the JavaScript function.

//function to sort results on resources page via AJAX
function sort_results() {
  $param1 = $_POST['parameter1'];
    ob_start();
    .....
    $content = ob_get_clean();
    echo $content;
    die();
  }
}
add_action( 'wp_ajax_sort_results', 'sort_results' );
add_action( 'wp_ajax_nopriv_sort_results', 'sort_results' );

In this code snippet we have two importants things.

  1. the call add_action which will be registering in wordpress that we have and wp_ajax_sort_results which will execute or tie to sort_results function.
  2. The actual function that handles the logic, get the parameters and echo the output.
  3. If you don’t, admin-ajax.php will execute it’s own die(0) code, echoing an additional zero in your response.

It is important that you realize that the name of the action will be the same as the wp_ajax_XXXX. The function can be named anything, I just used the same string as the action name for consistency.

Conclusion

Ajax is a powerful tool in a developers tool belt to add interactivity and to lower server strain. This can opens a lot of doors, but if you do not make the things in a right way your code could messy and hard to mantain. WordPress give you the possibility to use his framework to use it so it will be a good change to take advantage of it!, so send us an email to us to work together!

Posted in Javascript, PHP, Software Development, WordpressTagged , , , , , , ,

infuy
linkedin logo
twitter logo
instagram logo
facebook logo
By infuy
Infuy is an international technology leader company specialized in outsourcing services in the latest technologies. Blockchain (smart contracts, dApps and NFT marketplaces), full-stack, mobile development, and team augmentation are some of the areas where Infuy specializes in. As a software development company based in Uruguay with offices in the US, Infuy is always looking for the next big challenge, and the next big partner. As a fast-growing company, Infuy is always looking for talented and proactive people, who live up to the challenge and are as passionate as their team is about their mission to provide the best solutions to their partners, with the latest technologies, to join the team. For more information about the company and its services, please visit https://www.infuy.com/.