첫 번째 및 업데이트 페이지의 성공시 두 번째 jQuery.ajax 인스턴스 호출 방법

Question

클래스 'changetag'가있는 링크를 클릭하면 jQuery가 트리거됩니다. changetag.php를 통해 데이터베이스를 업데이트하기 위해 $.ajax()을 사용하고 있습니다.

그런 다음 클래스를 on/off로 전환하여 링크의 시각적 모양을 변경합니다. 코드는 다음과 같습니다.

$(function() { 
$(".changetag").click(function(){ 
    var element = $(this); 
    var I = element.attr("id"); 
    var info = 'switch_tag=' + I; 

    $.ajax({ 
     type: "POST", 
     url: "_js/changetag.php", 
     data: info, 
     success: function(){} 
    }); 

    $("#li_"+I).toggleClass("off on"); 
    element.toggleClass("off on"); 

    return false; 
}); 
}); 

완벽하게 작동합니다. 그러나 위의 경우 성공한 경우 데이터를 가져 와서 페이지의 다른 영역을 업데이트하는 두 번째 PHP 호출을 추가하려고합니다.

내가 추가하려고하는 :

$.ajax({ 
    url: "_js/loaddata.php", 
    success: function(results){ 
     $('#listresults').empty(); 
     $('#listresults').append(results); 
    } 
}); 

그냥 성공에 추가 : function() {} 작동하지 않는 것 같습니다. 내가 테스트하는 완전한 코드는 다음과 같습니다.

$(function() { 
$.ajaxSetup ({cache: false}); 
$(".changetag").click(function(){ 
    var element = $(this); 
    var I = element.attr("id"); 
    var info = 'switch_tag=' + I; 

    $.ajax({ 
     type: "POST", 
     url: "_js/changetag.php", 
     data: info, 
     success: function(){ 
      $.ajax({ 
       url: "_js/loaddata.php", 
       success: function(results){ 
        $('#listresults').empty(); 
        $('#listresults').append(results); 
       } 
      }); 
     } 
    }); 

    $("#li_"+I).toggleClass("off on"); 
    element.toggleClass("off on"); 

    return false; 
}); 
}); 

PHP 스크립트가 성공적으로 호출되었으며 토글 클래스가 작동하지만 뽑아 낸 데이터는 어떤 이유로 #listresults에 기록되지 않습니다.

Answer 1

아약스 호출 비동기 (기본적으로)입니다. 즉,이 코드는 다음과 같습니다.

$("#li_"+I).toggleClass("off on"); 
element.toggleClass("off on"); 

return false; 

이전의 ajax 호출이 완료되기 전에 실행될 수 있습니다. 이는 Ajax 및 비동기 코드 실행을 처음 접하는 프로그래머에게 공통적 인 문제입니다. 마찬가지로

$.ajax({ 
    type: "POST", 
    url: "_js/changetag.php", 
    data: info, 
    success: function(){ 
     $("#li_"+I).toggleClass("off on"); 
     element.toggleClass("off on"); 
    } 
}); 

, 당신이뿐만 아니라에서 두 번째 아약스 전화를 넣을 수 있습니다 :

아약스 호출이 같은 당신의 success 핸들러로 콜백,에 투입되어야 완료 후 당신이 원하는 무엇이든 실행한다

$.ajax({ 
    type: "POST", 
    url: "_js/changetag.php", 
    data: info, 
    success: function(){ 
     $("#li_"+I).toggleClass("off on"); 
     element.toggleClass("off on"); 

     $.ajax({ 
      url: "_js/loaddeals_v2.php", 
      success: function(results){ 
       $('#listresults').empty(); 
       $('#listresults').append(results); 
      } 
     }); 
    } 
}); 

jQuery 1.5의 Deferred Object을 사용하면 더 매끄럽게 만들 수 있습니다.

function firstAjax() { 
    return $.ajax({ 
     type: "POST", 
     url: "_js/changetag.php", 
     data: info, 
     success: function(){ 
      $("#li_"+I).toggleClass("off on"); 
      element.toggleClass("off on"); 
     } 
    }); 
} 

// you can simplify this second call and just use $.get() 
function secondAjax() { 
    return $.get("_js/loaddata.php", function(results){ 
     $('#listresults').html(results); 
    }); 
} 

// do the actual ajax calls 
firstAjax().success(secondAjax); 

당신 취소 둥지 콜백 수 있기 때문에 이것은 좋은 - 당신은 비동기 적으로 실행되는 코드를 작성할 수 있지만, 동 기적 - 실행 코드와 같은 기록됩니다.