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/always 的示例代码（不工作）：

// 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调用会立即返回。

我会在ajax 调用中将隐藏和清空部分移至beforeSend，并将错误处理添加到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);
       }
   });
}