909422229_layUi关于ajax与loading问题

技术交流群：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的话，动画不会出现，会一闪而过。亲测。

以上就是本文的全部内容。欢迎评论。