今天处理系统提交数据库记录时发现系统数据出现错乱,本来的数据无故增加或减少,花了大半天时间检查了所有的代码均未发现问题,正巧今天网络有点慢,所以随即发现问题元凶(由于网络延时,重复点的提交按钮),这本来应该是需要处理的,既然问题来了就处理呗,本来想着很简单的问题结果花了很长时间,系统开发前端使用了以LayUI为基础框架的Lotus框架,所以解决思路为提交后加个”爱的魔力转圈圈“,数据返回后取消,但就是这样的一个非常简单的问题熬了我3个多小时,真是爬了N个坑坑啊,我们首先来看初始代码,然后一个一个的来解决出现的问题:
lotus.addForm = function () { layui.use(['form', 'layer','jquery'], function () { var form = layui.form; var layer = layui.layer; var $ = layui.jquery; //监听提交 var options = { type: 'post', //post提交 dataType: "json", //json格式 data: {}, //如果需要提交附加参数,视情况添加 clearForm: false, //成功提交后,清除所有表单元素的值 resetForm: false, //成功提交后,重置所有表单元素的值 cache: false, async: true, //同步返回,开始用的是false success: function (data) { //$('#lotus-add-form').find('.layui-btn').eq(0).attr('disabled',false).html('提交'); layer.close(index); if (data.code == 0) { layer.msg(data.msg); } if(data.code==1) { layer.msg(data.msg, {icon: 1, time: 500}, function () { lotus.reload(); }); } if(data.code==2){ layer.msg(data.msg, {icon: 1, time: 2000}, function () { location.reload(); }); } //服务器端返回处理逻辑 }, error: function (XmlHttpRequest, textStatus, errorThrown) { layer.msg('操作失败:服务器处理失败(添加)'); }, }; // bind form using 'ajaxForm' $('#lotus-add-form').ajaxForm(options).submit(function (data) { //无逻辑 //$('#lotus-add-form').find('.layui-btn').eq(0).attr('disabled',true).html('提交中'); window.index = layer.load(2); //return false; }); }) }
就是这样一段再简单不过的代码给我布下了不少的坑,显然熟悉LayUI框架的兄弟们并不陌生这段Ajax提交代码,现在我们要做的就是在submit里加载layUI遮罩层防止用户重复提交如下:
var index = layer.load(2);//定义index值是为了layer.close来关闭这个遮罩层
然后在success处使用layer.close(index)关闭遮罩层,我这样处理后出现两个错误:
1、console控制台总是报错讲未定义的变量index,造成魔力圈圈转不停
2、ajax提交成功后代码执行异常,除layer.msg执行外,其它代码视为透明确不提示错误,无法排错
针对上述两个问题的罪愧祸首确是 async:false;//强调再强调 将async:true改成同步返回,这样success后面代码就正确执行了,自然就可以正常关闭了,通过对上面代码的分析,大家可以看到 var index在success里是无法正常读取的,所以要能正确关闭遮罩层的话可以直接使用 window.index = layer.load(2);//2为layui装载层样式图标,然后layer.close(index)就可以正常关闭了。
还有一个替代方法就是,提交的时候禁用提交按钮,提交成功返回后再启用按钮(但依然要注意ASYNC:TRUE这个鬼),代码如下:
$('#lotus-add-form').find('.layui-btn').eq(0).attr('disabled',true).html('提交中');//提交时把提交把按钮禁用并修改按钮文字
$('#lotus-add-form').find('.layui-btn').eq(0).attr('disabled',false).html('提交');//返回数据时回归大自然
水平有限,写得不对之处还望大鸟们别喷啊!
扫码关注公众号
长沙网站设计,长沙软件开发,长沙进销存开发,php进销存系统,ViooMa收银系统,ThinkPHP框架进销存系统
湘ICP备19023859号-1
Copyright©2020 长沙唯马网络科技有限公司. All Rights Reserved.