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

Posted 2023-05-08

【中文标题】如何在数据加载时添加加载指示器

【英文标题】：How to add loading indicator while data is loading

【发布时间】：2013-10-30 19:23:37

【问题描述】：

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

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

我该怎么办？

【问题讨论】：

提示：在调用$.ajax(...) 之前添加/显示它并在success() 和error() 上隐藏/删除它

How to implement a jQuery spinner image in an AJAX request的可能重复

【参考方案1】：

使用这个：

$.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();

【参考方案2】：

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

喜欢

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

【参考方案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>

【参考方案4】：

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

【讨论】：

这将在以下行给出错误：beforeSend : $('#somediv').show(); 应该有逗号而不是半列。

应该是beforeSend : function() $('#somediv').show();, 而不是beforeSend : $('#somediv').show();

【参考方案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();
     
);