Loader in ajax crud operation in wordpress custom theme

AJAX is a combination of HTML, CSS and JavaScript code that enables you to send data to a script and then receive and process the script’s response without needing to reload the page. Basically, AJAX is not a programming language, but if you want to use AJAX, you have to familiar with JavaScript/JQuery, HTML, CSS, and PHP. We can use loader in ajax with wordpress by using this way:

add-events.php

<div class="container card" style="margin-top:30px; background:wheat">

<h3><b>Add Events Form</b></h3>
<hr/>

<div class="form-group"> 
<label for="name">Event Title:</label>
<input type="name" class="form-control" id="ename" name="etitle">
</div>

<div class="form-group">
<label for="edate">Event date:</label>
<input type="date" class="form-control" id="edate" name="edate">
</div>


<div class="form-group">
<label for="number">Cost:</label>
<input type="number" class="form-control" id="ecost" name="ecost">
</div>


<button type="button" class="btn btn-default" id="submit">Submit</button>


</div>




<script>

jQuery(document).ready( function($) {

let site_url = "<?php echo site_url(); ?>"

let ajax_url = site_url+"/add-events";

// ajax start

$('#submit').click(function(){

let ename = $('#ename').val();
let edate = $('#edate').val();
let ecost = $('#ecost').val();

$.ajax({
type : "post",
url: ajax_url,
data : {ename : ename, edate: edate, ecost:ecost},

beforeSend:function(){
$('#submit').html('Loading...');
$('#submit').css('background', '#ccc');
$('#submit').css('border', 'none');
$('#submit').css('pointer-events', 'none');
},

success: function(data) { 
$('#submit').html('Submit');
$('#submit').css('background', 'white');
$('#submit').css('border', 'none');
$('#submit').css('pointer-events', 'pointer');
alert(data);
}
});

});

// ajax end


});

</script>

all-events.php

<div class="container" style="margin-top:30px">
   <h4>All Events</h4><hr/>

<table class="table table-striped" style="background:#f7f7f7">
<tr>
<td>S.No</td>
<td>Title</td>
<td>Date</td>
<td>Cost</td>
<td>Action</td> 
</tr>

<!-- loop start -->

<tbody id="loaddata">
  <tr>    
      <td>Loading..</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td> 
  </tr>
</tbody>

<!-- loop end -->
</table>

</div>

<script>
jQuery(document).ready( function($) {
let ajax_url = "all-events";

// ajax start
function ajaxload(){
   $.ajax({
     type : "get",
     url: ajax_url,
     success: function(data) {   
           $('#loaddata').html(data);
        }
}); 

}

ajaxload();

// ajax end


});

</script>