Ajax/Jquery - 回調之前的Ajax處理，beforeSend，ajaxStart，.always

Question

我目前遇到了jquery的ajax調用問題。我想要做的是清空幾個div，隱藏一個容器，然後調用請求的Ajax代碼再次填充div，並顯示它。然而，我的代碼是呼籲請求，並隱藏它在處理Ajax請求引起div的空...定製回調（不工作）

示例代碼：

// This is defined within an element and is retrieving properly as well 
cleanInfo(getCharacter($this.attr('id'))); 

function cleanInfo(callback){ 
    // hide the container first, then empty and callback to ajax function 
$('.sel_information_container').hide('slide', {direction: 'down'}, 'fast',function(){ 
    $('.sel_info_top').html(''); 
    $('.sel_info_description').html(''); 
    $('.skill_tree').html(''); 
    callback; 
     // OR 
}, callback); 
} 

function getCharacter(id){ 

if(!id){ 
    id = 0; 
} 

$.ajax({ 
// path is defined in core file this works right as it's retrieving the data properly... and everything is   
    // and everything is right in php... 
     url : _path + "/core/ajax.php", 
     type : 'POST', 
     data : { f: 'getCharacter', i: id }, 
     dataType : 'json', 
     success : function(data) { 
     // if data error is sent back process it ... 
     if(data.error){ 

      $('body').html(data.error); 

     }else{ 
      // if no error populate and show the container 
      $('.sel_info_top').html(data.info); 
      $('.sel_info_description').html(data.desc); 
      $('.skill_tree').html(data.skills); 
      $('.sel_information_container').show('slide', {direction: 'down'}, 'slow');   
     } 

    } 
}); 

} 

示例代碼ajaxSend/beforeSend/ajaxStart /總（不工作）：

// This is defined within an element and is retrieving properly as well 
getCharacter($this.attr('id')); 
// without callback and utilizing variable request... 
function cleanInfo(){ 

$('.sel_information_container').hide('slide', {direction: 'down'}, 'fast',function(){ 
    $('.sel_info_top').html(''); 
    $('.sel_info_description').html(''); 
    $('.skill_tree').html(''); 
}); 
} 

function getCharacter(id){ 

if(!id){ 
    id = 0; 
} 

    // Instead of attaching the results to the var, I have also ran beforeSend: cleanInfo() which 
    // does the exact same thing as the above... 

var request = $.ajax({ 
// path is defined in core file this works right as it's retrieving the data properly... and everything is   
    // and everything is right in php... 
     url : _path + "/core/ajax.php", 
     type : 'POST', 
     data : { f: 'getCharacter', i: id }, 
     dataType : 'json', 
     success : function(data) { 

     if(data.error){ 

      $('body').html(data.error); 

     }else{ 

      $('.sel_info_top').html(data.info); 
      $('.sel_info_description').html(data.desc); 
      $('.skill_tree').html(data.skills); 
      $('.sel_information_container').show('slide', {direction: 'down'}, 'slow');   
     } 

    } 
}); 
    // ajaxSend, always, ajaxStart, all not working with this... 
    request.ajaxSend(cleanInfo()); 

} 

任何解決方案的人嗎？

Answer 1

由於ajax調用是異步的，所以getCharacter調用將立即返回。

我會移動的隱藏和排空部分爲beforeSend在ajax通話，並添加錯誤處理到ajax調用也：

// This is defined within an element and is retrieving properly as well 
cleanInfo($(this).attr('id')); 

function cleanInfo(id){ 
    if(!id){ 
     id = 0; 
    } 

    $.ajax({ 
     url : _path + "/core/ajax.php", 
     type : 'POST', 
     data : { f: 'getCharacter', i: id }, 
     dataType : 'json', 
     cache: 'false', 
     beforeSend: function() { 
        console.log("Emptying"); 
        // hide the container first, then empty and callback to ajax function 
        $('.sel_information_container').hide('slide', {direction: 'down'}, 'fast',function(){ 
         $('.sel_info_top').html(''); 
         $('.sel_info_description').html(''); 
         $('.skill_tree').html(''); 
        } 
     }, 
     success : function(data) { 
      // if data error is sent back process it ... 
      if(data.error){ 
       $('body').html(data.error); 
      }else{ 
       // if no error populate and show the container 
       console.log("Populating"); 
       $('.sel_info_top').html(data.info); 
       $('.sel_info_description').html(data.desc); 
       $('.skill_tree').html(data.skills); 
       $('.sel_information_container').show('slide', {direction: 'down'}, 'slow');   
      } 
     }, 
     error: function (xhr, textStatus, thrownError) { 
     $('body').html("Error: " + xhr.status + " - " + thrownError); 
     } 
    }); 
}