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

Posted 澡堂麦霸

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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中再次设置按钮可提交即可


 

 



以上是关于Javascript在ajax提交过程中页面显示加载中,请等待效果,并在提交过程中限制确定按钮防止多次提交,提交完成后,解除提交限制的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ajax 调用中提交表单之前调用 javascript 验证函数

如何在本页提交表单把提交的值显示在本页面上? 请高手把详细的讲解过程给我说一下。谢谢!

AJAX、jQuery、Javascript、表单提交和 setTimout() 问题

在 JavaScript 中使用 ajax 提交和显示表单数据

在javascript-ajax中提交表单时如何显示进度条

Ajax技术--考试计时并自动提交试卷