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中再次设置按钮可提交即可


    
    
  • 相关阅读:
    查找小岛个数
    非递归遍历树的总结(前中后序)
    Java的TreeMap,C++的lower_bound,合并间隔
    最多包含2/k个不同字符的最长串
    爆气球这道题目,展开了新的思路
    C++的hashmap和Java的hashmap
    求数组里重复出现的数字
    数组中出现一次的两个数(三个数)& 求最后一位bit为1
    皇后问题的经典做法
    海外省电应用市场:本土化为先锋,高技术为基础
  • 原文地址:https://www.cnblogs.com/zzmb/p/7727277.html
Copyright © 2011-2022 走看看