博客
关于我
强烈建议你试试无所不能的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

你可能感兴趣的文章
谈一谈网络编程学习经验
查看>>
C Primer Plus (第五版) 第十七章 高级数据显示 编程练习
查看>>
若羽の暗时间——每天发现一点Dark Time
查看>>
工厂方法模式
查看>>
MVC 中的Viwe PageModel的思考
查看>>
修改网卡名称
查看>>
Javascript学习笔记总结
查看>>
Exchange2013 SP1通过 EMS导出及导入PST数据文件
查看>>
Java实现字符串中单词对调
查看>>
Verilog中的VCD(值变转储文件)
查看>>
预览 GitHub 项目里的网页或 Demo
查看>>
我的友情链接
查看>>
Java私塾跟我学系列——JAVA篇 第三章 数组和排序算法
查看>>
微信小程序 - 开发工具界面一览
查看>>
远程连接linux(Ubuntu配置SSH服务)22端口
查看>>
netty与marshalling简单使用
查看>>
优化带来降权得问题九个问题
查看>>
深入了解NTFS for Mac的界面中的五个勾选项 如启用聚关灯搜索
查看>>
ffmpeg遇到inttypes.h找不到
查看>>
mpsl *** 配置
查看>>