Javascript在ajax提交過程中頁面顯示載入中，請等待效果，並在提交過程中限制確定按鈕防止多次提交，提交完成後，解除提交限制

標籤：odm   json   script   isp   div   type   效果   net   highlight   

載入中，請等待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提交過程中頁面顯示載入中，請等待效果，並在提交過程中限制確定按鈕防止多次提交，提交完成後，解除提交限制