博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ajax加载数据中的loading效果
阅读量:6598 次
发布时间:2019-06-24

本文共 3941 字,大约阅读时间需要 13 分钟。

如题,不难理解,故不多做介绍,直切主题。

在html任意位置放置loading图标:

css样式文件,确保loading图标不论放大缩小窗口,都一直处于窗口正中心:

#cisLoading {	position: fixed;	left: 50%;	top: 50%;	z-index: 1000;	display: none;}

js控制ajax在开始加载数据时,显示loading;加载完数据或ajax出错结束加载,隐藏loading:

// 当前并发ajax请求的次数g.parallel_count = 0;/** url:要访问的远程地址* data:访问远程地址时的参数* callback:回调函数* timeout:访问远程地址超时时间* err_message:发生错误时的提示信息* child_parallel_count:一个页面同时有多个ajax,此处传该页面上的ajax请求的总次数*/g.ajax = function (url, data, callback, timeout, err_message, child_parallel_count) {    if(!data)        data = {};    if(!timeout){        timeout = g.timeout;    }    $.ajax({        url: url,        async: true,        type: 'POST',        timeout: timeout,        data: data,        //headers:{rtype:"query"},//可以附加头信息        beforeSend: function (XMLHttpRequest) {                // 过滤某种条件下才控制loading效果        	if (url == "/srp/data") {        		$("#cisLoading").show();        	}        },        success: function (text, status) {            try {            	if (text == "533") {            		$("#cisLoading").hide();            		alert("Cookie可能已丢失,本次请求无效,请退出重新登录!");            	} else if (text == "534") {            		$("#cisLoading").hide();            		alert("可能长时间未操作,用户信息已过期,请退出重新登录!");            	}                // var o = JSON.parse(text);                // try{                //     if(typeof o.message === "string")                //         o.message = JSON.parse(o.message);                // }catch (e){                //     console.warn("o.message to json faild");                // }            	else if (typeof callback === "function") {            		callback(text);            	}            } catch (e) {                console.debug(text);                console.error(e);                // alert(err_message);            }        },        error: function (XMLHttpRequest, status, errorThrown) {        	if (url == "/srp/data") {        		// 若未传child_parallel_count,代表可以直接hide        		// 或者传了,但parallel_count已经加到child_parallel_count        		if (child_parallel_count == undefined || ++g.parallel_count === child_parallel_count) {        			$("#cisLoading").hide();        			g.parallel_count = 0;        		}        	}        	console.error(err_message);        },        complete:function (XMLHttpRequest, status) {        	if (url == "/srp/data") {        		// 若未传child_parallel_count,代表可以直接hide        		// 或者传了,但parallel_count已经加到child_parallel_count        		if (child_parallel_count == undefined || ++g.parallel_count === child_parallel_count) {        			$("#cisLoading").hide();        			g.parallel_count = 0;        		}        	}        }    });};

以上实现,通过全局变量g.parallel_count和ajax最后一个入参child_parallel_count,对一个页面同时并发请求多个ajax的情况下,去控制loading正确的显示隐藏机制,具体请求方式如下:

p0.fetchData = function () {	var data1 = {"res": "20+21+22+23+24+25+37+38","paramStr": "[{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null}]"};	handleDateValue(data1);	g.ajax("/srp/data", data1, function (jsonStr) {		setValue(JSON.parse(jsonStr));	}, null, null, 3);	var data2 = {"res": "34+36+35+30+31+32+33+27+28+29","paramStr": "[{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"bizdate\": null},{\"bizdate\": null},{\"bizdate\": null}]"};	handleDateValue(data2);	g.ajax("/srp/data", data2, function (jsonStr) {		setValue(JSON.parse(jsonStr));		var chartScript = "

此页面需要3个ajax同时请求,当最后一个加载结束,不论成功失败,立即隐藏loading,则需设置child_parallel_count=3即可。

转载于:https://www.cnblogs.com/songzehao/p/10854253.html

你可能感兴趣的文章
LVM自动扩容
查看>>
第二阶段冲刺第八天,6月7日。
查看>>
struts2 action 返回类型分析
查看>>
【原创】FPGA开发手记(三) PS/2键盘
查看>>
JS常见的字符串操作
查看>>
uniGUI试用笔记(二)
查看>>
HOG特征-理解篇
查看>>
Microsoft.AlphaImageLoader滤镜解说
查看>>
超过响应缓冲区限制
查看>>
ubuntu 下安装 matplotlib
查看>>
webservice的几个简单概念
查看>>
spring Transaction Management --官方
查看>>
html5 canvas 奇怪的形状垂直渐变
查看>>
mac java环境
查看>>
SQL Server 2008 收缩日志(log)文件
查看>>
UICollectionView基础
查看>>
正确计算linux系统内存使用率
查看>>
[转载]SpringMVC的Model参数绑定方式
查看>>
Linux socket多进程服务器框架三
查看>>
Debug.print的用法
查看>>