Ajax加载数据中的loading效果 - 豆角茄子子

时间：2024-02-24 09:28:05

Ajax加载数据中的loading效果

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

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

<div id="cisLoading">
	<img src="/srp/assets/plugins/jstree/throbber.gif" style="width:24px;height:24px" />
</div>

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 = "<script src=\'assets/pages/jquery.dashboard.js\'></"+"script>";
		$("#dashboard").append(chartScript);
		showKnob();
	}, null, null, 3);

	var data3 = {"res": "43+44+45+46","paramStr": "[{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null}]"};
	handleDateValue(data3);
	g.ajax("/srp/data", data3, function (jsonStr) {
		setValue(JSON.parse(jsonStr));
	}, null, null, 3);
};

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

相关文章