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

Question

我有状态事件/停用按钮，当用户单击事件状态时，它会变为红色停用状态，反之亦然

目前我可以更新我的状态@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';
    }
}
?>

Answer 1

尝试此脚本并进行上述更改:

Changes:

1. 为这两个操作保留与 data-id 相同的属性
2. loaderElem 将是 DOM 中应该存在的加载器容器
3. BODY只不过是一个body选择器，只是为了避免冗余选择器
4. var elem = $(this); 用于在成功回调后需要 this 引用
5. 还要养成使用错误回调的习惯，因为您可能需要处理这种情况

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;
});