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

我使用jquery发出AJAX请求，如下所示：

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

加载此数据时，我希望在页面顶部显示一个小文本（仅显示“加载…”）而不阻止它

如何做到这一点？

使用

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

现在进行ajax调用

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

---

您可以在发送前使用

和
完成jQuery的
功能。在
beforeSend
中，显示控件的详细信息，并在
complete
中隐藏它。
3nigma在正确的轨道上，但至少在一般情况下，有一个细节出错

使用ajaxSetup只提供默认值，如果以后您进行一些ajax调用，为beforeSend（即，您需要设置一些特定的头）或complete（您希望处理相同的成功和错误）指定自己的回调，它们将覆盖ajaxSetup中的调用，并且加载指示器将中断

而是使用（）

这是一个更通用的解决方案，即使其他代码也需要，它也不会收支平衡。因此，在发送/完成处理程序或调用ajaxSetup之前，请设置一些全局或本地处理程序。
只需像这样简单地完成即可：

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


#加载杆{
位置：固定；
z指数：2147483647；
排名：0；
左-6px；
宽度：1%；
高度：2倍；
背景#b91f1f；
-moz边界半径：1px；
-webkit边界半径：1px；
边界半径：1px；
-moz转换：所有500毫秒的输入输出都很轻松；
-ms转换：所有500ms的缓进缓出；
-o型过渡：所有500ms的缓进缓出；
-webkit转换：所有500毫秒的易入易出；
过渡：所有500ms的缓进缓出；
}
#加载条等待dd，#加载条等待dt{
-moz动画：脉冲2s缓解0s无限；
-ms动画：脉冲2s缓解0s无限；
-o型动画：脉冲2s缓解0s无限；
-webkit动画：脉冲2s缓解0s无限；
动画：脉冲2s缓解0s无限；
}
#加载杆dt{
不透明度：.6；
宽度：180px；
右：-80px；
片段：rect（-6px，90px，14px，-6px）；
}
#加载杆{
不透明度：.6；
宽度：20px；
右：0；
剪辑：矩形（-6px，22px，14px，10px）；
}
#加载杆dd，#加载杆dt{
位置：绝对位置；
排名：0；
高度：2倍；
-莫兹盒阴影：#b91f1px 0 6px 1px；
-ms盒阴影：#b91f1f 1px 0 6px 1px；
-网络工具包盒阴影：#B91F1F 1px 0 6px 1px；
盒影：#B91F1F 1px 0 6px 1px；
-moz边界半径：100%；
-webkit边界半径：100%；
边界半径：100%；
}
$（文档）.ready（函数（）{
$.ajaxSetup({
beforeSend:函数（xmlHttpRequest）{
if（$（“#加载条”）.length==0）{
$（“正文”）。追加（“”）
$（“#加载栏”）.addClass（“等待”）.append（$（“”）；
$（“#加载条”）.width（（50+数学随机（）*30）+“%”）；
}
//在这里显示加载分区
},
完成：函数（）{
$（“#加载条”）。宽度（“101%”）。延迟（200）。淡出（400，函数（）{
$（this.remove（）；
});
//把div移到这里
}
});
});

将它们放在页面上，当您调用ajax时，加载将显示。。
在我的网站上测试的演示：

自举模型

“不阻止它”是什么意思？可能的重复：对它的一个调整是使用.delay（500）.show（）和.stop（true）.hide（），这样当返回时间超过500毫秒（或任何时间）时，它才显示“加载”。
$(document).ajaxSend(function(e, jqXHR){
  //show the loading div here
});
$(document).ajaxComplete(function(e, jqXHR){
  //remove the div here
});

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

       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({
                        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
}