JS实现AJAX文档上传时显示loading效果

敷盎方

于 2018-08-20 19:15:38 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：其他文章标签： AJAX 遮罩 loading动画上传文档动画

本文链接：https://blog.youkuaiyun.com/weixin_39389850/article/details/81876286

本文档介绍了如何在使用AJAX上传大型文件时，通过添加loading动画来提供用户体验。通过JSP定义按钮和loading图片，JS中的hideModal和showModal函数控制loading显示，并在AJAX请求中调用这些方法，确保用户在上传过程中能看到进度提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用AJAX上传文档时，经常会碰到一些较大的文件。如果不进行处理，在点击上传之后，页面没有任何的提示，会误导使用者去点击更多次。如果系统没有做过防止重复提交的处理的话，就会出现问题；且几遍做了方重复提交的处理，没有任何信息的提示对于用户而言也是不合理的。因此，在很多场景都会用到loading的动画效果。
以下简单的例子来说明这一方案。

JSP

<div class="commit-btn">
     提交
     <div class="modal fade" id="myModal">
          <img  alt="加载中..." src="./pc/loading.gif"/>
     </div>
</div>

在JSP页面定义了一个div，分别实现了按钮和loading图片的定义。

JS

function hideModal(){  
    $('#myModal').modal('hide');  
}  ;

function showModal(){  
    $('#myModal').modal({backdrop:'static',keyboard:false});  
}  ;

在JS中首先定义了hideModal、showModal两个function，通过选择器获得对象，通过modal属性控制组件的可见性。

AJAX

 $.ajax({
      type: 'POST',
      url: './XXX',
      cache: false,
      beforeSend:function (){  
          showModal();  
      },

最低0.47元/天解锁文章

200万优质内容无限畅学