Display Loading Image during AJAX call

This tutorial will teach you to Display Loading Image during AJAX call.

Ajax call has to method beforeSend and complete.

beforeSend

This executes before AJAX request is called.

Syntax

$.ajax({
 ...
 beforeSend: function(){
  /* Statement */
 }
 ...
});
complete

This executes when AJAX request is finished whether it successfully callback or not.

$.ajax({
 ...
 complete: function(){
  // Statement
 }
 ...
});
<script type='text/javascript'>

$(document).ready(function(){
 
 $("#but_search").click(function(){
  var search = $('#search').val();

  $.ajax({
   url: 'fetch_deta.php',
   type: 'post',
   data: {search:search},
   beforeSend: function(){
    /* Show image container */
    $("#loader").show();
   },
   success: function(response){
    $('.response').empty();
    $('.response').append(response);
   },
   complete:function(data){
    /* Hide image container */
    $("#loader").hide();
   }
  });
 
 });
});
</script>

<input type='text' id='search'>
<input type='button' id='but_search' value='Search'><br/>

<!-- Image loader -->
<div id='loader' style='display: none;'>
  <img src='reload.gif' width='32px' height='32px'>
</div>
<!-- Image loader -->

<div class='response'></div>

In this tutorial, you have learnt how to Display Loading Image or loader when AJAX call is in Progress.