zoukankan      html  css  js  c++  java
  • 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" 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中再次设置按钮可提交即可


    
    
  • 相关阅读:
    多线程编程
    Phthon环境搭建
    网站开发语言方案的选择
    NSTimer的一个误区
    一个tableview的自带动画
    一个扇形的动画效果
    一点两个uiview动画切换的体会
    关于gcd一些自己的理解。
    使用到定时器,单例和协议的一个小应用(2 )
    使用到定时器,单例和协议的一个小应用(1)
  • 原文地址:https://www.cnblogs.com/zzmb/p/7727277.html
Copyright © 2011-2022 走看看