我如何使用$ .post使用jquery ajaxstart和ajaxstop？

Question

基本上我想顯示加載GIF ...

這裏是我使用的代碼：

$("#mail-change input[type=submit]").click(function(event){ 

$.post('user_settings.php', $("#mail-change").serialize(), function(res) { 

$(res).insertBefore(".grey"); 

}, 'html') 

}); 

Answer 1

$("#loading").ajaxStart(function() { 
    $(this).show(); 
}).ajaxStop(function() { 
    $(this).hide(); 
}); 

編輯：

$("#mail-change input[type=submit]").click(function(event){ 
    $("#loading").show() 
    $.post('user_settings.php', $("#mail-change").serialize(), function(res) { 
     $(res).insertBefore(".grey"); 
     $("#loading").hide(); 
    }, 'html'); 
}); 

或：

$.ajax({ 
    url : 'user_settings.php', 
    data: $("#mail-change").serialize(), 
    beforeSend: function(){ 
    $("#loading").show(); 
    }, 
    complete: function(){ 
    $("#loading").hide(); 
    }, 
    success: function(res) { 
    $(res).insertBefore(".grey"); 
    } 
}); 

參見：

• ​​
• http://api.jquery.com/ajaxStop/
• http://docs.jquery.com/Ajax_Events
• http://api.jquery.com/category/ajax/global-ajax-event-handlers/