加载中,请等待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中再次设置按钮可提交即可