Implement Ajax in WordPress Using admin-ajax.php: A Beginner Tutorial – WordPress Tutorial

Ajax is widely used in wordpress, it is very easy to use by using admin-ajax.php. In this tutorial, we will introduce how to implement an ajax function in wordpress.

Get the url of admin-ajax.php

In order to use ajax, we need to know the url of admin-ajax.php first. We can do like this:

<?php
$admin_url=admin_url( 'admin-ajax.php' );
?>

Define the function to process the ajax request and data that will be sent

Client will send some data to server, the data should be a dictionary.

The function that process the ajax request also be sent to server. For example:

<script type="text/javascript">
jQuery(document).ready(function($){
        var data={
            action:'loadx',
	    key:'<?php echo urlencode(get_the_title());?>'
        }
        $.post("<?php echo $admin_url;?>", data, function(response) {
            $("#book_cloud").html(response);
        });
    });
</script>

var data contains the method that process the ajax request, which is defined as: action: method_for_ajax.

action:’loadx’, which means wordpress will use a function named loadx to process ajax request.

key: value, which means value will be sent to wordpress, we can get it by name key. Of course, you also can send more data to wordpress server using different key name.

$.post: which means browser will use http post method to send data to wordpress server.

Process ajax request

WordPress can receive and process the request sent by ajax.

We first create a function named loadx to process the ajax request, this name is determined by action: loadx

<?php
function loadx(){
	$key = $_POST['key'];
        //process
        die();
}
?>

We can use $_POST to receive data sent by ajax. If ajax use http get method to send data, we can use $_GET to get the data sent by ajax.

Then we should tell wordpress to use loadx function to process ajax request, here is the example code.

add_action('wp_ajax_loadx', 'loadx');
add_action('wp_ajax_nopriv_loadx', 'loadx');

We can find wp_ajax_loadx and  wp_ajax_nopriv_loadx, both of their name ends with loadx, which is the name of function that process ajax request.

Finally, wordpress will use loadx to process ajax request.