jquery在执行ajax后台获取值时Loading遮罩

￡神魔★判官ぃ 2022-08-19 12:21 166阅读 0赞

1、意义

开发项目中，前台的页面要发请求到服务器，服务器响应请求返回数据到前台，这段时间，有可能因为返回的数据量较大导致前台页面出现短暂性的等待，此时如果用户因不知情而乱点击有可能造成逻辑混乱，所以此时需要在加载数据中将前台进行提示在加载数据中，利用jquery的遮罩组件可以完成这个功能需求。

2、实现步骤

（1）、下载[showLoading.css][]    [jquery.showLoading.min.js][showLoading.css] 两个文件。

（2）、在jsp中引入这两个文件

**\[javascript\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  <link href="style/showLoading.css" rel="stylesheet" type="text/css" />  
2.  <script type="text/javascript" src="js/jquery.showLoading.min.js"></script>

（3）、在异步请求中使用这个组件

**\[javascript\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  **function** showloading(url,data)\{  
2.      $("body").showLoading();  
3.      $.ajax(\{  
4.          url:url,  
5.          data:data,  
6.          dataType:"json",  
7.          success:**function**(obj)\{  
8.              $("body").hideLoading();  
9.          \}  
10.     \});  
11. \}  
12.

[showLoading.css]: http://download.csdn.net/download/zfc0826/7651297
[view plain]: http://blog.csdn.net/oyyz111/article/details/37954969#

发表评论取消回复

表情：

评论列表（有 0 条评论，166人围观）

还没有评论，来说两句吧...

相关阅读

相关在jQuery环境下制作轻巧遮罩层

遮罩层的好处就是可以屏蔽用户对遮罩层下方元素的操作。制作原理很简单：1设置遮罩层触发按钮 2设置遮罩层内容 3设置遮罩层背景（重点是捕获内容div的大小位置）4设置点击触发

男娘i/ 2023年08月17日 17:20/ 0 赞/ 95 阅读

相关 jQuery鼠标悬停文字遮罩层

[下载地址][Link 1]背景色页可换成图片，只需将li下面的div换成img即可，可直接复用div的class样式。li中a标签可添加自己所需的链接地址。 ![16315

柔情只为你懂/ 2022年09月11日 13:24/ 0 赞/ 252 阅读

相关 jquery在执行ajax后台获取值时Loading遮罩

1、意义开发项目中，前台的页面要发请求到服务器，服务器响应请求返回数据到前台，这段时间，有可能因为返回的数据量较大导致前台页面出现短暂性的等待，此时如果用户因不知

￡神魔★判官ぃ/ 2022年08月19日 12:21/ 0 赞/ 167 阅读

相关 jquery遮罩层效果

例如点击登录后弹出一个遮罩层“正在登录，请稍后....”，此时用户是不能操作的。代码如下：前提先引入 jquery-xxxx.min.js、jquery.blockUI.j

朴灿烈づ我的快乐病毒、/ 2022年08月09日 00:47/ 0 赞/ 296 阅读

相关 [jquery]弹框，遮罩层

之前使用semantic的modal作为遮罩层。出现了一些关乎源代码的bug。所以自己必须要写一个自己的弹框以达到目的： ![这里写图片描述][SouthEast]

拼搏现实的明天。/ 2022年06月03日 04:18/ 0 赞/ 374 阅读

相关遮罩

<div class =“modal-backdrop in”id =“loadingModal”style =“display：none; z-index：20000

系统管理员/ 2022年05月26日 00:19/ 0 赞/ 281 阅读

相关 JS-- jQuery遮罩插件 jquery.blockUI.js

Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时，模拟同步模式下发起Ajax请求的行为。该插件激活时，会组织用户在页面进行的操作，直

快来打我*/ 2022年05月13日 18:12/ 0 赞/ 347 阅读

相关 ajax请求加上loading遮罩遇到的坑

本文起源于我之前写过的包含文件上传的form表单提交。在上述代码中关于ajax提交是同步还是异步的问题我也没有关注，结果在添加遮罩的时候就遇到问题了。问题描述：在点击保存提

柔情只为你懂/ 2022年03月18日 09:48/ 0 赞/ 342 阅读

相关 ajax同步提交时遮罩层不显示

业务需求：上传资源，由于某种原因必须用到ajax同步去上传。上传时耗时较长，为避免用户再上传过程中误操作，需要加遮罩层。猜到的坑：正常情况下，如果是异步是没

港控/mmm°/ 2021年07月26日 11:14/ 0 赞/ 447 阅读

相关 jquery 遮罩插件 Simple Overlay

轻量级的jQuery遮罩层插件-Simple Overlay，当我们需要遮挡住某个HTML元素或者要吸引用户的注意时就会用到遮罩层。这是个轻量级并且兼容性强的

以你之姓@/ 2021年06月24日 13:58/ 0 赞/ 552 阅读