解决layui layer.load() Ajax提交时,只在结束闪一下

因为后台处理事务一般要一点时间,所以前台会用个Loading爱的魔力转圈圈提高用户体验。

一般这种情况,大家常规操作就是在Ajax前加上load,ajax的success或者complete中close它即可。

最近写了个Bug,就是圈圈不转,只在结束时闪一下。找了半天……发现是自己弱智了。

解决办法     Ajax设置为异步请求!!!Ajax设置为异步请求!!!Ajax设置为异步请求!!!

理解起来也很简单,设置为同步时,前台会卡死一切进度,直到后台返回数据,这时设置的load也被卡死了,直到数据返回的时候才释放,所以开启和结束就在一瞬间。就会闪一下。

如果后台处理时间很短,那么同步异步基本没区别,反正就是秒男一瞬间。时间长了大家就要注意一下了。完整代码如下

<!DOCTYPE html>
<html>
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <script type="text/javascript" src="https://sumtou.oss-cn-shanghai.aliyuncs.com/static/layer/layer.js"></script>  <!--改了俩字母,这个就不给大家了-->
    <link href="https://sumto
Layer.js库提供了`layer.load()`方法用于在Ajax请求期间显示加载提示,结合AJAX使用的方法通常包括以下几个步骤: 1. **初始化load**: 当发起AJAX请求前,先创建一个loading层索引(如`var loadIndex;`),并在`beforeSend`回调中调用`layer.load()`设置加载状态[^1]: ```javascript loadIndex = layer.load(2); ``` 2. **配置load选项**: 可以自定义loading层的样式,比如阴影、内容、尺寸和文本对齐等。例如: ```javascript layer.load(2, { shade: [0.4, '#000'], content: '加载中...', success: function(layero) { // 样式设置 layero.find('.layui-layer-content').css({ 'background-position': 'center top', 'padding-top': '40px', 'width': '200px', 'text-align': 'center' }); } }); ``` 3. **处理响应**: 成功,可以在`success`回调中处理返回的数据,完成后关闭loading层: ```javascript complete: function() { layer.close(loadIndex); }, success: function(data) { // 处理数据... layer.alert("成功!"); }, error: function() { // 错误处理 layer.closeAll("loading"); layer.alert("请求超或服务器错误,请稍后再试!"); } ``` 4. **请求结束后关闭load**: 当Ajax请求完成,通过`layer.close()`关闭对应的loading层。 注意,`layer.load()`不是直接与`$.ajax()`结合使用的函数,而是通过设置其生命周期来配合AJAX操作。另外,在处理动态添加的元素,可能需要在success回调中通过`parent`对象找到这些元素以便触发相应的事件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值