首页 > web前端 > css教程 > 如何在异步AJAX请求期间显示加载指示器?

如何在异步AJAX请求期间显示加载指示器?

Mary-Kate Olsen
发布: 2024-11-30 02:07:11
原创
915 人浏览过

How Can I Display a Loading Indicator During Asynchronous AJAX Requests?

在异步 AJAX 请求期间显示加载指示器

在编程领域,经常会遇到异步请求,例如执行的请求通过 $.ajax。这些请求在后台检索数据,允许用户在处理请求时继续与应用程序交互。但是,在某些情况下,需要向用户提供视觉反馈,指示当前正在进行异步请求。

为了实现此目的,可以显示图像来表示请求的活动状态。以下代码片段提供了如何执行异步请求的示例:

$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
});
登录后复制

要在请求期间显示加载图像,可以在发出请求之前显示它并在请求完成后隐藏它:

$('#loading-image').show();
$.ajax({
      url: uri,
      cache: false,
      success: function(html){
        $('.info').append(html);
      },
      complete: function(){
        $('#loading-image').hide();
      }
    });
登录后复制

或者,可以使用更通用的解决方案,将加载图像绑定到全局 ajaxStart 和 ajaxStop 事件。此方法可确保为所有 AJAX 事件显示加载图像:

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});
登录后复制

以上是如何在异步AJAX请求期间显示加载指示器?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板