Simple wordpress AJAX submit example

Follow these simple steps.

1. Create a button on the page i.e. maybe on index page

       <input class="ajax-link" type="button" value="AJAXSUBMIT">

2. we will pass the text data "client side data" and get the response from server as "received data:" "client side"


3. create a file myajax.js under themes 'js' folder having below content

    jQuery(document).ready( function($) {
$(".ajax-link").click( function() {
var data = {
action: 'test_response',
                        post_var: 'client side '
};
// the_ajax_script.ajaxurl is a variable that will contain the url to the ajax processing file
$.post(the_ajax_script.ajaxurl, data, function(response) {
alert(response);
});
return false;
});
});

4. open the functions.php file from themes folder
5. Add the javascript and localize the ajaxurl

function test_ajax_load_scripts() {
// load our jquery file that sends the $.post request
wp_enqueue_script( "ajax-test",get_template_directory_uri() . '/js/myajax.js', array( 'jquery' ) );

// make the ajaxurl var available to the above script
wp_localize_script( 'ajax-test', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_print_scripts', 'test_ajax_load_scripts');

 

6. Add the below in functions.php to process ajax data from cleint side

function text_ajax_process_request() {
// first check if data is being sent and that it is the data we want
  if ( isset( $_POST["post_var"] ) ) {
// now set our response var equal to that of the POST var (this will need to be sanitized based on what you're doing with with it)
$response = $_POST["post_var"];
        $server_text= "received data: ";
// send the response back to the front end
echo $server_text.$response;
die();
}
}
add_action('wp_ajax_test_response', 'text_ajax_process_request');
add_action('wp_ajax_nopriv_test_response', 'text_ajax_process_request');

Here is the result