防止用户多次提交表单记录

约定不等于承诺〃 2022-09-23 08:47 232阅读 0赞

require.async(['/plugins/layer-v1.8.4/skin/layer.css','/plugins/layer-v1.8.4/layer.min'],function(){//异步加载弹出框
    	$("#getScore").click(function calculateResult(form) {//点击事件
    		//上面传递参数时，如果data为数据，一般会这么添加：	
    		var row2 = {name: 'peter', age: '23'};
    		var data = [];
    		data.push(row1);
    		data.push(row2);
    		 $.ajax({
    		    type:"post",
    		    traditional:true,
    		    url:"/exam/resultProcess.html",
    		    dataType:"json",
    		    data:{param:data,examId:examVal},
    		    success:function(param){
    			var level = param.level;
    			
    			$.layer({
    				type :1,
    				title : "<span class='tipsTitle'><b>风险承受能力测试</b></span>",
    				closeBtn :[0,true],
    				area: ['400px', '200px'],
    				border : [10 , 0.3 , '#000', true],
    				btns:2,
    				btn : ['重新测试','关闭'],
    				page: {
    					html:"<div style='padding:20px;font-size:16px;'>您的得分为：<strong class='red-code'>"+param.score+"分</strong>，属于<strong class='red-code'>"+uLevel+"</strong>投资者</div>"
    				},
    				yes:function(){
    					layer.closeAll();
    					clearAnswers();
    				},
    				no: function(){
    					layer.closeAll();
    				}
    			});		
    		    }
    		});
    	});
    });
    //理解：点击事件触发弹出提示框，询问重新测试还是关闭。

ajax请求处理防止用户多次提交表单

$.ajax({
            url: 'login.do',
            data: params,
            type: 'post',
            beforeSend: function () {
                // 让提交按钮失效，以实现防止按钮重复点击
                $(loginBtn).attr('disabled', 'disabled');
    
                //给用户提供友好状态提示
                $(loginBtn).text('登录中...');
            },
            complete: function () {
                //让登陆按钮重新有效
                $(loginBtn).removeAttr('disabled');
            },
            success: function(msg){
    
                if (msg === 'ok') {
                    alert('登录成功！');
    
                    //TODO 其他操作...
                } else {
                    alert('登录失败，请重新登录！');
                }
    
            }
        });

项目中无法使用原生js获取元素，这里btn的属性没有办法修改，所以想到前端节流函数：

初步实现了防止用户多次提交，经测试发现有时候还是会出现多次提交的情况，并且设置1s后响应，在网络状况良好的情况，用户会觉得响应时间慢的体验，下面是终极杀招：

这样就实现了表单只能提交一次的效果，提交成功页面跳转。

参考：[浅谈一下如何避免用户多次点击造成的多次请求][Link 1]

[7 个基本的 JS 函数][7 _ JS]

[Link 1]: https://www.cnblogs.com/luckyXcc/p/5804650.html
[7 _ JS]: http://web.jobbole.com/82540/