Javascript在ajax提交过程中页面显示加载中,请等待效果,并在提交过程中限制确定按钮防止多次提交,提交完成后,解除提交限制

加载中,请等待div:

<div id="load" class="center-in-center" style="display:none;">	 
    <img src="../resources/images/loader.gif" />加载中,请等待...
</div>

确定重置按钮:
<div class="form-group row">
  <div class="conf" style="float: left" οnclick="conf()" id="conf">确定</div>
  <div class="reset"  style="float: left" οnclick="reset()" id="reset">重置</div>
</div>



加载中,请等待效果图的CSS样式,设置其至页面中央:

.center-in-center{
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

ajax提交代码:

$.ajax({		  type: 'POST',	
			  url:   "", 		
			  data:  {},//json数据  	
			  beforeSend:function(XMLHttpRequest){ 		
			  $("#load").show();			
			  $("#conf").removeAttr("onclick");//提交过程中,将确定按钮设置为不可点击(方法1)
//			  $('#conf').attr('onclick','javascript:void(0);');//将按钮设置为不可点击 (方法2)
			 }, 		
			  success: function(resultMessage){				
 			 $("#load").hide();			  
			  var resultMessage = eval('(' + resultMessage + ')'); 		
			  alert(resultMessage.result);			
			  if(resultMessage.result){				 
			 alert(resultMessage.message);				 
			 $("#conf").attr("onclick","conf();");//提交成功,将按钮设置为可点击	
		          }else{				
			  alert(resultMessage.message);				
 			  $("#conf").attr("onclick","conf();");				  			
			  }		  
				  },
//	        	   dataType: dataType			     });


 加载中,请等待操作为:在beforeSend中$("#load").show(),在success中$("#load").hide()即可
按钮提交限制操作:分别在beforeSend中设置按钮不可提交,然后提交成功后在success中再次设置按钮可提交即可













  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值