ajax进度提示,Ajax在请求过程中显示进度的简单实现

Ajax在Web应用中使用得越来越频繁。在进行Ajax调用过程中一般都具有这样的做法：显示一个GIF图片动画表明后台正在工作，同时阻止用户操作本页面(比如Ajax请求通过某个按钮触发，用户不能频繁点击该按钮产生多个并发Ajax请求)；调用完成后，图片消失，当前页面运行重新编辑。以下图为例，页面中通过一个Load链接以Ajax请求的方式加载数据(左)。当用户点击该链接之后，Ajax请求开始，GIF图片显示“Loading“状态，同时当前页面被“罩住”防止用户继续点击Load按钮(中)；Ajax请求完成被返回响应的结果，结果被呈现出来的同时，GIF图片和“遮罩”同时消失(右)。

在这里我同样以ASP.NET MVC应用为例，提供一种简单的实现方式。我们GIF图片和作为遮罩的

定义在布局文件中，并为它们定制了相应的CSS。其中GIF和遮罩

的z-index分别设置为2000和1000(这个任意，只要能够让遮罩的

遮住当前页面，GIF图片显示在最上层即可)。后者通过设置position、top、bottom、left和right是它可以遮住整个页面，并且将其背景设置为黑色。@ViewBag.Title

.hide{displaynone }

.progress{z-index }

.mask{position fixed;top ;right ;bottom ;left ; z-index ; background-color #}

...

@RenderBody()

然后我们通过如下的代码为jQuery定义了另一个实现Ajax调用的方法ajax2，该方法依然调用$.ajax(options)实现Ajax调用。在ajax2方法中我们将options参数complete属性进行了“封装”，让可以将显示出来的GIF图片和遮罩

隐藏起来。同时覆盖了options的async属性，是之总是以异步方式执行，因为只有这样浏览器才不能被锁住，GIF也才能正常显示。在调用$.ajax(options)进行Ajax请求之前，我们将GIF图片和遮罩

显示出来，并且将其定位在正中央。遮罩

的透明度进行了相应设置，所以会出现上图(中)的效果。

...

$(function () {

$.ajax = function (options) {

var img = $("#progressImgage");

var mask = $("#maskOfProgressImage");

var complete = options.complete;

options.complete = function (httpRequest, status) {

img.hide();

mask.hide();

if (complete) {

complete(httpRequest, status);

}

};

options.async = true;

img.show().css({

"position" "fixed",

"top" "%",

"left" "%",

"margin-top" function () { return - * img.height() / ; },

"margin-left" function () { return - * img.width() / ; }

});

mask.show().css("opacity", ".");

$.ajax(options);

};

});

...

那么现在进行Ajax调用的时候只需要调用$.ajax2就可以，如下所示的是实例中“Load”链接的click事件的注册代码：

Load

$("#load").click(function () {

$.ajax ({

url '@Url.Action("GetContacts")',

success function(result)

{

$("#result").html(result);

}

});

ajax进度提示,Ajax在请求过程中显示进度的简单实现相关推荐

Pytest----pytest-sugar 执行过程中显示进度条
[原文链接]Pytest----pytest-sugar 执行过程中显示进度条 Pytest-sugar是一款用来改善控制台显示的插件,增加了进度条显示,使得在用例执行过程中可以看到进度条,而且进度条 ...
统一处理jquery ajax请求过程中的异常错误信息的机制
统一处理jquery ajax请求过程中的异常错误信息的机制参考文章: (1)统一处理jquery ajax请求过程中的异常错误信息的机制 (2)https://www.cnblogs.com/wi ...
MKNetwork网络请求过程中onCompletion调用两次的问题
MKNetwork在网络请求过程中,MKNetworkOperation操作同一个url请求(GET请求)时会调用两次onCompletion. 这样会引起两次的数据问题. 现在一种解决方法. if ...
请求过程中，需要证书认证，这种情况下如何处理
某些站点请求时候,会需要证书,没有通过认证直接访问, 请求返回结果一般包含 code 443 和 cert,要如何处理 1.请求过程中,添加证书,但这种方式不那么方便或者友好,一般不这么处理 2.请 ...
在Perl程序中显示进度条之多姿多彩的自写代码
在Perl程序中显示进度条之多姿多彩的自写代码 yixf 于 2011-11-29,09:57 方法一 1 2 3 4 5 6 7 8 #!/usr/bin/perlmy $max = 10; f ...
android 显示进度,progressdialog-如何在Android中显示进度对话框？
progressdialog-如何在Android中显示进度对话框? 当我单击"登录"按钮时,我想显示ProgressDialog,这需要时间才能移动到另一个页面. 我怎样才能做到 ...
安装python系统找不到指定的路径_解决安装过程中显示“系统找不到指定的路径”-百度经验...
解决软件安装过程中显示"系统找不到指定的路径"?有些用户在变声专家一半时候弹出"无法打开....系统找不到指定的路径"字样,解决方法非常简单,如遇上述问题的小伙 ...
android 图片处理过程中添加进度条,『Android自定义View实战』给我一个图标，还你一个水波纹进度球...
前言我们都知道,平时表现进度的方式有千千万万种(没有UI想不到的,只有你做不到的= =.),其中有一种就是水波纹进度球的形式,网上很多种实现都是直接采用纯色填充的方式,即水波纹都是纯颜色填充,效果看 ...
网站请求过程中的代号及意义
[我COPY来的:https://blog.csdn.net/iteye_15036/article/details/81523989] IIS状态代码的含义概要当用户试图通过HTTP或文件传输协 ...
android 图片处理过程中添加进度条,[Android] 随时拍图像处理部分总结及源码分......
? ? ? ? 随着寒假到来,终于有时间总结下Android这个随手拍的课程作业了,同时分享了我完成的这部分对图像处理的心得吧!你可以结合demo来阅读这篇文章,希望对大家有所帮助. ? ? ? ? ...

ajax进度提示,Ajax在请求过程中显示进度的简单实现

ajax进度提示,Ajax在请求过程中显示进度的简单实现相关推荐

最新文章

热门文章