Ajax加载数据中的loading效果 |
您所在的位置：网站首页 › jquery加载中效果 › Ajax加载数据中的loading效果 |
|
如题，不难理解，故不多做介绍，直切主题。 在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 = ""; $("#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即可。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |