How to add Ajax loader image in PHP?

Today, We want to share with you How to add Ajax loader image in PHP?.In this post we will show you display ‘loading’ image when ajax call is in progress, hear for How to show loader on ajax request and hide on responce we will give you demo and example for implement.In this post, we will learn about display ‘loading’ image when ajax call is in progress javascript with an example.

How to add Ajax loader image in PHP?

There are the Following The simple About jquery ajax loading image while getting the data Full Information With Example and source code.

As I will cover this Post with live Working example to develop jquery progress bar ajax response, so the some major files and Directory structures for this example is following below.

PHP Laravel is a web application framework with expressive, elegant syntax.The PHP Framework for Web Artisans,freeing you to create without sweating the small things. CRUD Operation With Server Side.

When jquery an AJAX http request is sent to get a any data records from the server side then it may some take times depending on the data large of processing or the number of get a records.

Display Loading Image when AJAX call is in Progress

Show loading image on beforeSend and hide it in complete.

<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 Progressloader container
    $("#loader_progress").show();
   },
   success: function(response){
    $('.response').empty();
    $('.response').append(response);
   },
   complete:function(data){
    // Hide Progressloader container
    $("#loader_progress").hide();
   }
  });
 
 });
});
</script>

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

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

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

.ajaxStart() & .ajaxComplete()

$(document).ajaxStart(function(){
  // Show Progressloader container
  $("#loader_progress").show();
});
$(document).ajaxComplete(function(){
  // Hide Progressloader container
  $("#loader_progress").hide();
});

Example: Dynamic Content Load using jQuery AJAX

HTML Menu Navigation

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
$products = $db_handle->runQuery("SELECT * FROM products");
if(!empty($products)) {
?>
<div id="menu">
<?php 
foreach($products as $page) { 
?>
<input type="button" value="<?php echo $page["title"]; ?>" onClick="getPage(<?php echo $page["id"]; ?>);" />
<?php } ?>	
</div>
<?php } ?>	
<div id="display_list"></div>

jQuery AJAX Dynamic Content Loading

function getPage(id) {
	$('#display_list').html('<img src="loader_progress.gif" />');
	jQuery.ajax({
		url: "fetch_all_products.php",
		data:'id='+id,
		type: "POST",
		success:function(data){$('#display_list').html(data);}
	});
}

Getting Page Content in PHP

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
$products = $db_handle->runQuery("SELECT * FROM products WHERE id = ".$_REQUEST['id']);
if(!empty($products)) {
?>
<h3><?php echo $products[0]['title'];?></h3>
<div><?php echo $products[0]['content'];?></p>
<?php } ?>

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about loader is not working in ajax call.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.