技术交流群:958923746,有学习视频,文档等。
一、在用户提交ajax后需要将按钮置为不可点击,弹出loading小动画,防止用户重复点击发起请求。
下面采用两种解决这个问题。
一、使用JS锁。
var lock=false;
layer.confirm('确认提交吗?', {
btn: ['提交','取消'],
offset: '100px'
}, function(){
if(!lock){
lock = true;
addPlan();
}
这个办法也可以解决重复提交问题,不过不太好看,利用了我们后端的思想解决问题。
二、使用HTML样式解决,发送请求后将按钮置为不可点击。
不可点击标签:
$('#subtn').attr('disabled','true');
删除标签:
$('#subtn').removeAttr('disabled');
添加layui loading动画:
var index = layer.load(5, {time: 30*1000});
关闭动画:
layer.close(index);
第二种更加复合我们的前端交互,提高用户体验。
另外使用第二种需要将ajax的是否同步为true,如果不是true的话,动画不会出现,会一闪而过。亲测。
以上就是本文的全部内容。欢迎评论。