jquery - 我如何将 jquery ajaxstart 和 ajaxstop 与 $.post 一起使用？

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/ajaxStart/
• http://api.jquery.com/ajaxStop/
• http://docs.jquery.com/Ajax_Events
• http://api.jquery.com/category/ajax/global-ajax-event-handlers/