使用jQuery在AJAX请求期间显示繁忙加载指示器

我有状态激活/停用按钮，当用户单击活动状态时，它会变成非活动的红色，反之亦然

目前我能够更新我的状态@backend，但每次我应该刷新看到我的变化!!

我的要求是在活动/停用过程中改变状态我要加载ajax图像加载器加载器图像应该覆盖整个屏幕。我的状态应该在mysql数据库更新!!

请任何帮助是感激的，谢谢!

Php代码

<?php 
    include 'db.php';
    $sql = "select * from sections order by id asc";
    $data = $con->query($sql);
    $str='';
    if($data->num_rows>0)
    {
        while( $row = $data->fetch_array(MYSQLI_ASSOC))
        {
            $str.="
        "?>
        <div class="row">
            <div class="col-md-1">
            <?php 
                if ($row['status'] == '1') 
                { 
            ?>
        <a href="#" class="btn btn-success btn-sm active" ida='<?php echo $row['id'];?>'></a>
        <?php } 
        else if($row['status'] == '0')
        {
        ?>
        <a href="#" class="btn btn-danger btn-sm deactive" idde='<?php echo $row['id'];?>'></a>
        <?php } ?>
        </div>
        </div>
    <?php
        }
    }
    else
    {
        $str .= "<p style='text-align:left;'>No Data Available</p>";
    }
    echo $str;   
?>

Jquery代码

<script type="text/javascript">
$('body').delegate('.active','click',function(e){
    var IdStatus = 0;
    var id = $(this).attr('ida');
    $.ajax({
        url:"pages/status1.php",
        data:{
            status:IdStatus,
            id:id
        },
        dataType:'html',
        success:function()
        {
            alert('success');
        }
    });
    e.preventDefault();
    return false;
});
$('body').delegate('.deactive','click',function(e){
    var IdStatus = 1;
    var id = $(this).attr('idde');
    $.ajax({
        url:"pages/status1.php",
        data:{
            status:IdStatus,
            id:id
        },
        dataType:'html',
        success:function()
        {
            alert('success');
        }
    });
    e.preventDefault();
    return false;
});
</script>

PHP更新代码

<?php 
    if(isset($_REQUEST['status']))
    {
    $status = $_REQUEST['status'];
    $id = $_REQUEST['id'];
    $sql = 'update sections set status='.$status.' where id='.$id.'';
    $result = mysql_query($sql);
    if($result)
    {
        echo 'updated successfully';
    }
    else
    {
        echo 'failed to update';
    }
}
?>

var BODY = $('body');
var loaderElem = $('#loader');
BODY.delegate('.active', 'click', function(e) {
  loaderElem.show();
  var IdStatus = 0;
  var elem = $(this);
  var id = elem.attr('data-id');
  $.ajax({
    url: "pages/status1.php",
    data: {
      status: IdStatus,
      id: id
    },
    dataType: 'html',
    success: function() {
      elem.removeClass('active').addClass('deactive');
      loaderElem.hide();
      alert('success');
    }
  });
  e.preventDefault();
  return false;
});
BODY.delegate('.deactive', 'click', function(e) {
  loaderElem.show();
  var IdStatus = 1;
  var elem = $(this);
  var id = elem.attr('data-id');
  $.ajax({
    url: "pages/status1.php",
    data: {
      status: IdStatus,
      id: id
    },
    dataType: 'html',
    success: function() {
      elem.removeClass('deactive').addClass('active');
      loaderElem.hide();
      alert('success');
    }
  });
  e.preventDefault();
  return false;
});

$('body').delegate('.active','click',function(e){
    var IdStatus = 0;
    var id = $(this).attr('ida');
    $.ajax({
        url:"pages/status1.php",
        beforeSend: function() {
          // do overlay stuff
        },
        data:{
            status:IdStatus,
            id:id
        },
        dataType:'html',
        success:function()
        {
            // remove overlay stuff
            alert('success');
        }
    });
    e.preventDefault();
    return false;
});