909422229_layUi关于ajax与loading问题

技术交流群：958923746，有学习视频，文档等。

一、在用户提交ajax后需要将按钮置为不可点击，弹出loading小动画，防止用户重复点击发起请求。

下面采用两种解决这个问题。

一、使用JS锁。

                    var lock=false;
						    .confirm(\'确认提交吗？\', {
						          btn: [\'提交\',\'取消\'], 
						          offset: \'100px\'
						        }, function(){
						        	if(!lock){
						        		lock = true;
						        		addPlan();
						        	}

这个办法也可以解决重复提交问题，不过不太好看，利用了我们后端的思想解决问题。

二、使用HTML样式解决，发送请求后将按钮置为不可点击。

不可点击标签：
$(\'#subtn\').attr(\'disabled\',\'true\');
删除标签：
$(\'#subtn\').removeAttr(\'disabled\');

添加layui loading动画：
var index =  .load(5, {time: 30*1000});
关闭动画：
 .close(index);

第二种更加复合我们的前端交互，提高用户体验。

另外使用第二种需要将ajax的是否同步为true，如果不是true的话，动画不会出现，会一闪而过。亲测。

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