最初のページと更新ページの成功時に2番目のjQuery.ajaxインスタンスを呼び出す方法

Question

クラス'changetag'のリンクをクリックするとjQueryがトリガされます。私は$.ajax()を使ってchangetag.phpでデータベースを更新しています。

次に、オン/オフの間でクラスを切り替えることによってリンクの外観を変更します。コードは次のとおりです。

$(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; 
}); 
}); 

完璧に動作します。しかし、今、私は上記を成功させると、データを取得してページの別の領域を更新する2番目の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

Ajaxコールは（デフォルトで）非同期です。つまり、このコードは、前のajax呼び出しが終了する前に実行される可能性があります。

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

return false; 

これは、ajaxと非同期コードの実行を初めて経験したプログラマにとって共通の問題です。

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

同様に、あなたはそこにも第二のAJAX呼び出しを置くことができます：：

あなたはAJAX呼び出しが行われた後に実行されるようにしたいものは、そのようなあなたの 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); 

それはあなたの未巣のコールバックができますので、これはいいです - あなたが非同期的に実行するコードを書くことができますが、同期に実行されるコードのように書かれています。