How to properly work with AJAX on WordPress (WP_AJAX)

Hi there.

This time I'm back with WP AJAX.
Simple to use and easy to code.

Actually using Ajax directly into your plugin or theme is a little immature way. Cause you'll have to keep track of your files to make it work, which sometime become difficult. That's where WP_Ajax make things comfortable.

I'll share sample codes with you and will try to explain how it works.

To follow this tutorial you need to have basic understanding of AJAX, WP Plugins, WP Hooks and some other things.

To initialize AJAX let's write a sample Ajax code.

jQuery('#ajax-button').on('click', function() {
    jQuery.post(
        ajaxurl,
         {
             action: 'our_ajax_action',
             myname: 'Babar'
          },
          function( response ) {
              alert(response);
          }
    );
});

We're binding our click action on a button with id ajax-button. ajaxurl is defined by WP which is actually <?php admin_url().'/wp-ajax.php'; ?>. And notice the action parameter. We'll use that later.

Now filter it into the footer.

function our_footer_js_for_ajax() {
?>
<script type="text/javascript">
jQuery('#ajax-button').on('click', function() {
    jQuery.post(
        ajaxurl,
         {
             action: 'our_ajax_action',
             myname: 'Babar'
          },
          function( response ) {
              alert(response);
          }
    );
});
</script>
<?php }
add_filter('wp_footer', 'our_footer_js_for_ajax');

If you want it onto admin area, filter it in admin footer.
[code type=php]addfilter('adminfooter', 'ourfooterjsforajax');[/code]

Now time for our AJAX handler.

function our_ajax_handler_callback() {
    echo $_POST['myname'];
    die();
}

Always remember to die() or exit at the very end of the handler function.
Hoot it into Ajax action. Remember our Ajax action we wrote in our JS code? We'll use it here.

add_acton('wp_ajax_our_ajax_action', 'our_ajax_handler_callback');

So it's actually Concatenate of wpajax prefix and your action data in Ajax code.

If you want to activate Ajax for non-logged in users another hook needed.

add_action( 'wp_ajax_nopriv_our_ajax_action', 'our_ajax_handler_callback' );

Just prefeix with wpajaxnoprov_ instead of wpajax.

And that's it.