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

我会在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);
       }
   });
}

Ajax / Jquery - 回调之前的Ajax处理，beforeSend，ajaxStart，.always

1 个答案: