jquery - 如何在数据加载时添加加载指示器

Question

我想在数据加载时显示加载指示器。以下是我当前的代码：

$.ajax({
     类型：“发布”，
     网址：“网址”，
     数据：数据字符串，
     缓存：假，
     成功：函数（html）{
         $("#div").html(html);
     }
});

我该怎么办？

Answer 1

您可以为此使用 jquery ajaxStart和ajaxStop实用程序。

像

$( document ).ajaxStart(function() {
  $( "#loading" ).show();
});

Answer 2

用这个：

$.ajax({
     type: "POST",
     url: "URL",
     data: dataString,
     cache: false,
     success: function(html) {
         $(selector).html();
         $("#div").html(html);
     },
     beforeSend: function(){
         $(selector).html("your loading image");
     }

});
$(selector).html();

Answer 3

<script type="text/javascript">
$(document).ready(function() {  

$.ajax({
     type: "POST",
     url: "URL",
     data: dataString,
     cache: false,
     success: function(html) {
         $("#div").html(html);
     }
});

$( document ).ajaxStart(function() {
  $("#loading" ).show();
});

$( document ).ajaxStop(function() {
  $("#loading" ).hide();
});


});
 </script>

Answer 4

$.ajax({
     type: "POST",
      beforeSend : function(){ $('#somediv').show();},
     url: "URL",
     data: dataString,
     cache: false,
     success: function(html) {
      $("#div").html(html);
      $("#somediv").hide();
     }
});

Answer 5

这是一个简单的逻辑。

1）在ajax调用之前，显示加载的gif图像。

2）在回调时，隐藏加载图像。

$("#loading" ).show();
$.ajax({
     type: "POST",
     url: "URL",
     data: dataString,
     cache: false,
     success: function(html) {
         $("#div").html(html);
         $("#loading" ).hide();
     }
     error: function (html) {
         console.log("errorResponse: " + html);
         $("#loading" ).hide();
     }
});