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的属性没有办法修改,所以想到前端节流函数:
var timer = null;
uiEvents.updateForm = function(){
var value = $(this).val();
clearTimeout(timer);
//如果连续快速触发提交按钮,不会向后台发请求,但是最后会进行一次请求的。
timer = setTimeout(function() {
//触发请求
$.ajax({
url: '/user/list',
type: 'get',
data: params,
success: function () {
//显示匹配结果
//......
}
});
},1000);
}
初步实现了防止用户多次提交,经测试发现有时候还是会出现多次提交的情况,并且设置1s后响应,在网络状况良好的情况,用户会觉得响应时间慢的体验,下面是终极杀招:
function executeOnce(fn, context) {
var result;
return function() {
if(fn) {
result = fn.apply(context || this, arguments);
fn = null;
}
return result;
};
}
uiEvents.updateClick = executeOnce(function() {
$.ajax({
data: options,
url: '${apiBaseUrl}/workItemUpdate.json',
dataType: 'json',
success: function(data) {
if(data.code==200){
window.location.reload();
rav.message('操作成功');
}else if(data.code==500){
rav.message( {"type":"error","content":data.message})
}
}
});
}
这样就实现了表单只能提交一次的效果,提交成功页面跳转。