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/