jquery添加遮罩层防止表单的重复提交

jquery添加遮罩层防止表单的重复提交

1、页面最底部添加隐藏的遮罩层div

1 <!-- 蒙层 -->
2             <div class="loadingBox" style="display:none;">
3                <div class="loading"><img src="<%=basePath%>/resource/image/loading.gif"></div>
4             </div>

2、loading.gif图片

3、页面css样式

1 /*loading加载框*/
2 .loadingBox{position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.5); z-index:999;}
3 .loadingBox .loading{width:120px; height:120px; position:absolute; top:50%; left:50%; margin-top:-60px;margin-left:-60px;}}
4 .loadingBox .loading img{width:100%;}

4、js加载蒙层方法

 1 /**
 2  * 遮罩层
 3  */
 4 function loading(flag) {
 5     if(flag == true) {
 6         $(".loadingBox").show();
 7     }
 8     if (flag == false) {
 9         setTimeout(function() {
10             $(".loadingBox").fadeOut();
11         }, 200);
12     }
13 }

5、ajax提交表单防止重复提交使用

 1 var isRequestAjax = true; //全局变量是否可以发起ajax请求
 2 /**
 3  * 立即办理
 4  * @param phone
 5  * @param yzm
 6  * @param encryStr
 7  */
 8 function quickHandle(phone,yzm,encryStr) {
 9     var msg;
10     loading(true);
11     isRequestAjax = false;
12     $.ajax({
13         type:'POST',
14         url: "/activityService/tjyl/quickHandle.do",
15         data: {
16             "phone" : phone,
17             "yzm":yzm,
18             "encryStr":encryStr
19         },
20         dataType:'json',
21         success:function(result){
22             //处理成功操作...       
          },
36         complete : function() {isRequestAjax = true; loading(false);}
37     });
38 }

 点击提交会出现遮罩层，防止表单重复提交

 

posted @ 2018-03-03 14:58  sunny1009  阅读(373)  评论(0)    收藏  举报