簡體   English   中英

在使用jQuery的AJAX請求期間顯示忙碌加載指示器

[英]Showing Busy loading Indicator during an AJAX Request using jQuery

當用戶單擊活動狀態時,我具有狀態活動/非活動按鈕,狀態變為紅色,反之亦然

目前,我能夠更新我的狀態@backend,但是每次我應該刷新以查看更改時!!

我的要求是在更改狀態的活動/不活動過程中,我想加載ajax圖像加載器,其中加載器圖像應覆蓋整個屏幕。 我的狀態應該在mysql db中更新!

請任何幫助,謝謝!

郵遞區號

<?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';
    }
}
?>

嘗試使用上述更改的腳本:

變化:

  1. 兩項操作都與data-id保持相同的屬性
  2. loaderElem將是應該位於您的DOM中的加載器容器
  3. BODY只是body selector ,只是為了避免多余的選擇器
  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;
});

嘗試使用$.ajax() beforeSend選項

$('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;
});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM