Hiện thanh tải sử dụng jQuery trong khi thực hiện một yêu cầu AJAX

Question

Tôi đang thực hiện một yêu cầu với jquery như AJAX:

$.get('/Stuff.php', function (data) { 
    $('#own').html(data); 
}); 

trong khi dữ liệu này là tải Tôi muốn hiển thị một văn bản nhỏ ở phía trên cùng của trang (chỉ nói "đang tải ...") mà không chặn nó.

cách thực hiện việc này?

Answer 1

3nigma đang đi đúng hướng, nhưng có một chi tiết sai, ít nhất là trong trường hợp chung.

Sử dụng ajaxSetup chỉ cung cấp mặc định, nếu sau đó bạn thực hiện một số cuộc gọi ajax chỉ định cuộc gọi lại riêng của họ cho beforeSend (nghĩa là bạn cần đặt một số tiêu đề cụ thể) hoặc hoàn thành (bạn muốn xử lý cả thành công lẫn lỗi) ghi đè lên những người trong ajaxSetup và chỉ báo tải của bạn sẽ phá vỡ.

Thay vào đó, sử dụng Global Ajax Events (more about ajax events)

$(document).ajaxSend(function(e, jqXHR){ 
    //show the loading div here 
}); 
$(document).ajaxComplete(function(e, jqXHR){ 
    //remove the div here 
}); 

Đây là một giải pháp chung chung hơn mà sẽ không phá vỡ ngay cả khi các mã khác cũng muốn để thiết lập một số beforeSend/xử lý hoàn chỉnh toàn cầu hay địa phương hay gọi ajaxSetup.

Answer 2

$("#loading").show(); //before send 
$.get('/Stuff.php', function (data) { 
    $('#own').html(data); 
    $("#loading").hide(); //when sucess 
}); 

Answer 3

sử dụng ajaxSetup

$.ajaxSetup({ 
    beforeSend:function(xmlHttpRequest){ 
    //show the loading div here 
    }, 
    complete:function(){ 

    //remove the div here 
    } 
    }); 

nay thực hiện cuộc gọi ajax

$.get('/Stuff.php', function (data) { 
    $('#own').html(data); 
}); 

Answer 4

Bạn việc sử dụng beforeSend và complete chức năng của jQuery. Trong beforeSend bạn hiển thị điều khiển của bạn và trên complete bạn ẩn nó.

Answer 5

chỉ hoàn toàn đơn giản như thế:

<style type="text/css"> 
#loadingbar { 
    position: fixed; 
    z-index: 2147483647; 
    top: 0; 
    left: -6px; 
    width: 1%; 
    height: 2px; 
    background: #b91f1f; 
    -moz-border-radius: 1px; 
    -webkit-border-radius: 1px; 
    border-radius: 1px; 
    -moz-transition: all 500ms ease-in-out; 
    -ms-transition: all 500ms ease-in-out; 
    -o-transition: all 500ms ease-in-out; 
    -webkit-transition: all 500ms ease-in-out; 
    transition: all 500ms ease-in-out; 
} 
#loadingbar.waiting dd, #loadingbar.waiting dt { 
    -moz-animation: pulse 2s ease-out 0s infinite; 
    -ms-animation: pulse 2s ease-out 0s infinite; 
    -o-animation: pulse 2s ease-out 0s infinite; 
    -webkit-animation: pulse 2s ease-out 0s infinite; 
    animation: pulse 2s ease-out 0s infinite; 
} 

#loadingbar dt { 
opacity: .6; 
width: 180px; 
right: -80px; 
clip: rect(-6px,90px,14px,-6px); 
} 

#loadingbar dd { 
    opacity: .6; 
    width: 20px; 
    right: 0; 
    clip: rect(-6px,22px,14px,10px); 
} 

#loadingbar dd, #loadingbar dt { 
    position: absolute; 
    top: 0; 
    height: 2px; 
    -moz-box-shadow: #b91f1f 1px 0 6px 1px; 
    -ms-box-shadow: #b91f1f 1px 0 6px 1px; 
    -webkit-box-shadow: #B91F1F 1px 0 6px 1px; 
    box-shadow: #B91F1F 1px 0 6px 1px; 
    -moz-border-radius: 100%; 
    -webkit-border-radius: 100%; 
    border-radius: 100%; 
} 
</style> 


<script type="text/javascript"> 
$(document).ready(function() { 
    $.ajaxSetup({ 
     beforeSend:function(xmlHttpRequest){ 
      if ($("#loadingbar").length === 0) { 
        $("body").append("<div id='loadingbar'></div>") 
        $("#loadingbar").addClass("waiting").append($("<dt/><dd/>")); 
        $("#loadingbar").width((50 + Math.random() * 30) + "%"); 
      } 
        //show the loading div here 
     }, 
     complete:function(){ 
       $("#loadingbar").width("101%").delay(200).fadeOut(400, function() { 
         $(this).remove(); 
        }); 
     //remove the div here 
     } 
    }); 

}); 
</script> 

đặt chúng vào trang của bạn, và khi đã bao giờ bạn thực hiện ajax gọi tải sẽ hiển thị .. bản demo thử nghiệm trên web của tôi: http://www.xaluan.com

Answer 6

Mô hình Bootstrap.

 var loadingPannel; 
     loadingPannel = loadingPannel || (function() { 
      var lpDialog = $("" + 
       "<div class='modal' id='lpDialog' data-backdrop='static' data-keyboard='false'>" + 
        "<div class='modal-dialog' >" + 
         "<div class='modal-content'>" + 
          "<div class='modal-header'><b>Processing...</b></div>" + 
          "<div class='modal-body'>" + 
           "<div class='progress'>" + 
            "<div class='progress-bar progress-bar-striped active' role='progressbar' aria-valuenow='100' aria-valuemin='100' aria-valuemax='100' style='width:100%'> " + 
             "Please Wait..." + 
            "</div>" + 
            "</div>" + 
          "</div>" + 
         "</div>" + 
        "</div>" + 
       "</div>"); 
      return { 
       show: function() { 
        lpDialog.modal('show'); 
       }, 
       hide: function() { 
        lpDialog.modal('hide'); 
       }, 

      }; 
     })(); 

Ajax gọi

    $.ajax({ 
         url: "/", 
         type: "POST", 
         data: responseDetails, 
         dataType: "json", 
         traditional: true, 
         contentType: "application/json; charset=utf-8", 

         beforeSend: function() { 

          loadingPannel.show(); 

         }, 
         complete: function() { 

          loadingPannel.hide(); 
         }, 
         data: responseDetails 
        }) 
        .done(function (data) { 
          if (data.status == "Success") { 
//Success code goes here 
}