显示使用jQuery，同时使一个AJAX请求

Question

我正在使用像jQuery AJAX请求加载条（这只是说“加载...”）没有阻止它。

该怎么办？

Answer 1

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 /完整的处理程序或调用ajaxSetup，不会打破一个更通用的解决方案。

Answer 2

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

Answer 3

使用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 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 
}