Question

我正在使用jquery发出一个AJAX请求：

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

在加载此数据时，我想在页面顶部显示一个小文本（只是说“正在加载...”）而不会阻止它。

怎么做？

Answer 1

使用ajaxSetup

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

    //remove the div here
    }
    });

现在进行ajax调用

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

Answer 2

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

Answer 3

3nigma在正确的轨道上，但有一个细节错了，至少在一般情况下。

使用ajaxSetup只提供默认值，如果稍后你做一些ajax调用，为beforeSend指定自己的回调（即你需要设置一些特定的头文件）或者完成（你想要同时处理成功和错误）他们会覆盖ajaxSetup中的那些将会中断。

相反，请使用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
});

这是一个更通用的解决方案，即使其他代码也想要设置一些全局或本地的beforeSend / complete处理程序或调用ajaxSetup，也不会破坏。

Answer 4

您使用jQuery的beforeSend和complete函数。在beforeSend中显示您的控件，然后在complete上隐藏它。

Answer 5

就像那样简单：

<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>

将它们放到你的页面上，当你进行ajax调用时，加载将显示.. 在我的网站上进行了演示测试：http://www.xaluan.com

Answer 6

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调用

                    $.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
}

在发出AJAX请求时使用jQuery显示加载栏

6 个答案: