Using wordpress admin ajax

Using wordpress admin ajax is very simple. You need to follow this steps accordingly.

1. Create a function to display your form in front end. You can use short code to include your form in post/page.


2. Make sure you must have action filed in form, with the help of action value you can access wp_ajax hook.


3. Declare the ajax hook respective to the action name. In this example, my action name is the_ajax_hook1, so i have created the hook wp_ajax_the_Action_hook1(wp_ajax_{$action}).


4. Include your js file by wp_enque_script().


5. Localize your included script with the help of wp_localize_script(). That's all..

Here is our example...
[code lang="php"]
/*
Plugin name:KTM Ajax call
Description: creating ajax call from front end
Author : Karthik
*/
//It helps to add your script.
wp_enqueue_script('ktm_my_script' ,
plugin_dir_url(__FILE__) . 'script.js' ,
array('jquery')
);
//It helps to access php variable in javascript file.
wp_localize_script('ktm_my_script',
'the_ajax_script',
array('ajaxurl'=>admin_url( 'admin-ajax.php' ) )
);

/* wp_ajax_ hook will be triggered when an ' the_ajax_hook1 ' action is set.*/
add_action('wp_ajax_the_ajax_hook1','ktm_ajax_callback');
add_action('wp_ajax_nopriv_the_ajax_hook1','ktm_ajax_callback');

/* This is the response function to be executed when the ajax
request is made with the action variable */
function ktm_ajax_callback(){
$name = $_POST['name'];
echo 'Hello '.$name.'!!!';
die();
}

//Front end view. This can be accessed by the hook [ktm_ajax_call].
function front_end_form(){
$frm = '
<form id="theForm">
<input type="text" name="name">
<input type="hidden" name="action" value="the_ajax_hook1">
<input type="submit" onClick="return disp()">
</form>
<div id="response">Hi</div>';
return $frm;
}

add_shortcode('ktm_ajax_call','front_end_form');
?>

[/code]

Here is our script.js

[code lang="js"]
function disp(){
jQuery.post(
the_ajax_script.ajaxurl,
jQuery('#theForm').serialize(),
function(data){
jQuery('#response').html(data);
}
);
return false;
}
[/code]