Question

我正在使用jquery ajax api所以加载一些内容，代码看起来像这样，

$.ajax({
   type:"POST",
   url:"/search/location",
   data: getQuery,
   success:function(data){
       //alert(getQuery);
       //console.log(data);
       $('body.secEmp').html(data); //overwrite current data
       setUpRegionCheckBoxes(); //fire function again to reload DOM
   }

}）;

在我的HTML中我有<div id="loading">Loading Content</div>这是display:none的css风格，而我的ajax带来了我想要显示隐藏的div的内容，但我找不到我也尝试将.ajaxStart附加到我的加载div上然后执行show()但是这不起作用。

有什么建议吗？

Answer 1

$("#loading").show(); // show the div before the ajax call

$.ajax({
   type:"POST",
   url:"/search/location",
   data: getQuery,
   success:function(data){
       //alert(getQuery);
       //console.log(data);
       $('body.secEmp').html(data); //overwrite current data
       setUpRegionCheckBoxes(); //fire function again to reload DOM

       $("#loading").hide(); //hide the loading div in callback function
   },
   error: function(){
       // error callback routine
       $("#loading").hide(); //hide the loading div in callback function
   }
});

Answer 2

做这样的事情：

$("#loading").show();
$.ajax({
   type:"POST",
   url:"/search/location",
   data: getQuery,
   success:function(data){
       //alert(getQuery);
       //console.log(data);
       $('body.secEmp').html(data); //overwrite current data
       setUpRegionCheckBoxes(); //fire function again to reload DOM
       $("#loading").hide();
   }
});

如果出现错误，您可能还想隐藏div。您还可以尝试使用fadeIn和fadeOut来获得一些不错的效果。

Answer 3

$("#loading").show();
$.ajax({
   type:"POST",
   url:"/search/location",
   data: getQuery,
   success:function(data){
       //alert(getQuery);
       //console.log(data);
       $('body.secEmp').html(data); //overwrite current data
       setUpRegionCheckBoxes(); //fire function again to reload DOM
       $("#loading").fadeOut();
   }
});

你必须将$("#loading").hide();放在脚本中，以便在未触发AJAX时不显示加载div

// EDIT

啊，你的风格display: none;

是没有理所当然的

添加加载图形jquery

3 个答案: