Layui表单AjaxForm提交时增加遮罩层防止多次提交


今天处理系统提交数据库记录时发现系统数据出现错乱,本来的数据无故增加或减少,花了大半天时间检查了所有的代码均未发现问题,正巧今天网络有点慢,所以随即发现问题元凶(由于网络延时,重复点的提交按钮),这本来应该是需要处理的,既然问题来了就处理呗,本来想着很简单的问题结果花了很长时间,系统开发前端使用了以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('提交');//返回数据时回归大自然

水平有限,写得不对之处还望大鸟们别喷啊!

注:本文转载自唯马网络,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除。

评论