您的位置:首页 > Web前端 > JavaScript

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

2017-10-20 08:34 507 查看
加载中,请等待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" onclick="conf()" id="conf">确定</div>
<div class="reset"  style="float: left" onclick="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中再次设置按钮可提交即可

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐