首页 web前端 js教程 Ajax全局加载框(Loading效果)的配置

Ajax全局加载框(Loading效果)的配置

May 23, 2018 pm 03:51 PM
ajax loading 效果

这篇文章主要介绍了Ajax全局加载框(Loading效果)的配置的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

在Ajax进行后台数据请求的过程中,我们有时候会希望用户能知道页面后台还在做一些事情,这时候就需要给用户一个非常明确的提示,也就是我们所谓的进度条

实现原理:

Jquery可以对ajax进行全局的设置,实现类似于C#中面向切面的效果,即对在Ajax提交之前和提交完成之后,我们均可以对其进行一系列的操作,所以我们可以在ajax开始的时候,把Loading框显示出来,在ajax请求完成之后,把loading框关闭掉,基本上就完美实现这个效果了。

Jquery全局配置Ajax的方式为:

$.ajaxSetup({
beforeSend: function () {
//ajax请求之前
},
complete: function () {
//ajax请求完成,不管成功失败
},
error: function () {
//ajax请求失败
}
});
登录后复制

当然,beforeSend/complete/error这些配置在单个的ajax中也是可以去配置的,把他写在ajaxSetup,并且放到公共的页面上,他就是全局的啦~

最后献上代码吧,我这里在做的时候,为了方便,直接使用了layer这个插件来实现loading的效果,并没有手动去写css毕竟这不是咱强项~有能力的同学可以自己去写一下这个loading的效果,用js手动控制其显示隐藏的方式来实现~如果要直接copy,那么请引入layer,传送门:http://layer.layui.com/

这里有一点需要说明的是,当同时存在多个ajax时,可能会一个加载完了,就把其他的全都关掉了,对于这个,我能想到的有如下两种解决方案:

■我目前的解决办法是让他打开多个(坐标都一样,看不出来),然后关的时候哪个结束了就关哪个,我这里的做法是给ajaxSetup里面增加了个index参数(这玩意儿只能写到设置的对象里面,不然还是所有的ajax共享同一个),有了index,应该就怎么玩都行了。

■还有一种解决方案适合于自己去写这个控制逻辑,只显示一个加载框,在加载框上写个当前有多少ajax在执行的参数类似于<p data-ajax-count='0'></p>,每次开始或结束的时候,去维护ajax-cout的值,并且在ajax结束的时候去判断,如果这个data-ajax-count小于等于0了,把p隐藏起来,应该也是可以的,这种办法我并没有实践.

$(function () {
$.ajaxSetup({
layerIndex:-1,
beforeSend: function () {
this.layerIndex = layer.load(0, { shade: [0.5, &#39;#393D49&#39;] });
},
complete: function () {
layer.close(this.layerIndex);
},
error: function () {
layer.alert(&#39;部分数据加载失败,可能会导致页面显示异常,请刷新后重试&#39;, {
skin: &#39;layui-layer-molv&#39;
, closeBtn: 0
, shift: 4 //动画类型
});
}
});
});
登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Ajax中的循环方案

浅谈Bootstrap的DatePicker日期范围选择

在dom4j中使用XPath的简单实例

以上是Ajax全局加载框(Loading效果)的配置的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

用户遭遇罕见故障 三星 Watch 智能手表突现白屏问题 用户遭遇罕见故障 三星 Watch 智能手表突现白屏问题 Apr 03, 2024 am 08:13 AM

用户遭遇罕见故障 三星 Watch 智能手表突现白屏问题

九州风神阿萨辛 4S 散热器评测 风冷'刺客大师”范儿 九州风神阿萨辛 4S 散热器评测 风冷'刺客大师”范儿 Mar 28, 2024 am 11:11 AM

九州风神阿萨辛 4S 散热器评测 风冷'刺客大师”范儿

春日里的精致光影艺术,哈趣 H2 性价比之选 春日里的精致光影艺术,哈趣 H2 性价比之选 Apr 17, 2024 pm 05:07 PM

春日里的精致光影艺术,哈趣 H2 性价比之选

解决jQuery AJAX请求遇到403错误的方法 解决jQuery AJAX请求遇到403错误的方法 Feb 20, 2024 am 10:07 AM

解决jQuery AJAX请求遇到403错误的方法

解决jQuery AJAX请求403错误的方法 解决jQuery AJAX请求403错误的方法 Feb 19, 2024 pm 05:55 PM

解决jQuery AJAX请求403错误的方法

航嘉 MX750P 全模组电源评测:750W 的白金实力浓缩 航嘉 MX750P 全模组电源评测:750W 的白金实力浓缩 Mar 28, 2024 pm 03:20 PM

航嘉 MX750P 全模组电源评测:750W 的白金实力浓缩

七彩虹隐星 P15 24 评测:颜值性能兼具的硬核全能游戏本 七彩虹隐星 P15 24 评测:颜值性能兼具的硬核全能游戏本 Mar 06, 2024 pm 04:40 PM

七彩虹隐星 P15 24 评测:颜值性能兼具的硬核全能游戏本

轻松拿捏 4K 高清图像理解!这个多模态大模型自动分析网页海报内容,打工人简直不要太方便 轻松拿捏 4K 高清图像理解!这个多模态大模型自动分析网页海报内容,打工人简直不要太方便 Apr 23, 2024 am 08:04 AM

轻松拿捏 4K 高清图像理解!这个多模态大模型自动分析网页海报内容,打工人简直不要太方便

See all articles