Using AJAX in WordPress

This article will demonstrate that how you can use ajax in wordpress. There is a different proccess of using ajax in wordpress as ajax request first goes to admin-ajax.php file and then proccess it. if there is no function created then admin-ajax.php will return -1.
Here is sample code of using ajax in wordPress in front end.

<?php 
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
function my_enqueue() {
 wp_enqueue_script('like_post', get_template_directory_uri().'/js/post-like.js', '1.0', 1 );
 wp_localize_script('like_post', 'ajax_var', array(
 'url' => admin_url('admin-ajax.php'),
 'nonce' => wp_create_nonce('ajaxnonce')
 ));
}

?>

In above Code we have used wp_localize_script() function which Localizes a registered script with data for a JavaScript variable.  Inside which we have used an array for url and nonce.

now we can use url and nonce variables in our javascript code easily.

if you want execute the script  to fire on the front-end for both visitors and logged-in users, then you need to use these hooks:

<?php
add_action( 'wp_ajax_my_post_like', 'my_post_like' );
add_action( 'wp_ajax_nopriv_my_post_like', 'my_post_like' );

 ?>

where my_post_like() is our defined function which will be invoked once ajax request is fired .

var $wk_jq=jQuery.noConflict();
 (function($wk_jq){ 
 	$wk_jq(window).bind("load",function(){
	$wk_jq(".post-like a").click(function(eve){ 
		heart = $wk_jq(this);
		post_id = heart.data("post_id"); 
		$wk_jq.ajax({
			type: "post",
			url: ajax_var.url,   // variable defined above with an array for url and nonce 
			data: "action=my_post_like&nonce="+ajax_var.nonce+"&post_id="+post_id,  // Action variable defines the name of the php function which proceess ajax request based on the variable we have passed   
			success: function(count){
				 // Do your stuff here once ajax response is returned
			}
		});
		eve.preventDefault();
				
		return false;
		});
	});
})($wk_jq);

In our above code we also passing a nonce variable along with the post id for security reasons

<?php
function my_post_like()
{
  $nonce = $_POST['nonce']; 
 // Verify nonce field passed from javascript code
    if ( ! wp_verify_nonce( $nonce, 'ajaxnonce' ) )
        die ( 'Busted!');
   
  if(isset($_POST['post_like']))
  {
    // do your stuff and return count;
    echo $count;
    }
    else
      echo "default text";
  }
  exit;
}
?>

If you have noticed, in above code we have used exit ajax in wordPress returns 0 for any function, so we must use exit at the end of the function

That’s all for how to use Ajax in wordPress, still have any issue feel free to add a ticket and let us know your views to make the code better https://webkul.uvdesk.com/en/customer/create-ticket/