A標籤/按鈕防止重複提交&頁面Loading製做

【實現原理】

防止重複提交與頁面的提交時的Loading設置，均是在提交，可是還沒有處理完成進行的操做，且提交爲異步提交（同步提交不須要考慮）。所以，其實現原理是在點擊按鈕或A標籤時，將按鈕/A標籤置爲不可用，在提交完成的回調函數中再將按鈕/A標籤置爲可用；Loading原理是在點擊提交時，生成Loading樣式，在提交完成以後隱藏該樣式。

[同步]：提交請求->等待服務器處理->處理完畢返回 這個期間客戶端瀏覽器不能幹任何事 
[異步]：請求經過事件觸發->服務器處理（這是瀏覽器仍然能夠做其餘事情）->處理完畢 

 

【按鈕防止重複提交】

function save(){
    $('#submit').attr("disabled",true); 
    //或者$('#submit').attr("disabled","disabled"); 
    $.post(url, params, function (data) {
        $('#submit').attr("disabled",false); 
        //或者$('#submit').removeAttr("disabled"); 
        //或者$('#submit').attr("disabled",""); 
    });
}

 

OS:原生Js處理：document.getElementById("submit").disabled = true; 

【A標籤防止重複提交】

需注意的是，A標籤是沒有disabled屬性的，因此用按鈕的方法控制A標籤的提交是不起做用的。

//全局變量
var save_flag = true;

function save(){
    save_flag = false;
    $.post(url, params, function (data) {
        save_flag = true;
        //........其他代碼
    });
}

這種方法在按鈕的防止提交中也能夠使用，總的來講是一種通用、簡易的方法。

【Loading】

CSS中：

<style>
            #loading {
                position: fixed;
                width:500px;
                top:50%;
                left:50%;
                margin: -25px -250px;
                background-color:#FFFFFF;
                border:1px solid #CCCCCC;
                text-align:center;
                padding:25px;
            }
</style>

HTML中：

<div id="loading" style="display: none" ><img style="vertical-align: middle;" src="images/loading.gif" />Loading...</div>

JS代碼：

function save(){
    $("#loading").css("display","");
    $.post(url, params, function (data) {
        $("#loading").css("display","none");
        //........其他代碼
    });
}

 

轉載請註明出處：

http://www.cnblogs.com/llicat/