jQueryとAjaxで非同期API呼び出しを作成する

Question

検索ボタンをクリックすると2つのAPI呼び出しを行う必要があるアプリケーションを構築しています。 2回目の呼び出しには最初のリクエストのデータが必要なので、2回目の呼び出しを遅らせるために何らかの非同期関数が必要です。また、検索ボタンを1回クリックするたびに2つのAPI呼び出しを行うことも重要です。ここでは、コードは次のようになります。

$(document).ready(function(){ 
    $("#searchButton").click(function(){ 
     var requestData = $("#searchBox").val(); 
     var resultElement = $('#resultDiv'); 
     var url = "https://api.trello.com/"; 
     var member_id_list = ""; 

     $.ajax({ 
      method: "GET", 
      url: url + "search?title="+requestData 
     }) 
     .done(function(data){ 
      $.each(data.items, function(key, value){ 
       if(value.member_id !== undefined){ 
        member_id_list += value.member_id + ";"; 
       } 
       resultElement.append($("<ul>").text(value.title)).append(value.body).addClass("question-body"); 
       $("ul").addClass("question-title"); 
      }); 

      $(document).ajaxSuccess(function(){ 
       var member_id_list = member_id_list.slice(0, -1); 
       $.ajax({ 
        method: "GET", 
        url: url + "/member/"+ member_id_list 
       }) 
       .done(function(data){ }); 
      }); 
     }); 
    }); 
}); 

私は（私が正常にあまりにも多くのリクエストを送信せずに第二の呼び出しを行うことができていないとして）私は第二のAPI呼び出しで何をするのかとの一部を完了していません。

Answer 1

私は解決策がajaxSuccessを使用するのではなく、最初のAJAX呼び出しの行わ機能で二AJAX呼び出しを行うことはないと思います。

ajaxSuccessは、ajaxリクエストが正常に完了するたびに呼び出されます。 AJAXの呼び出しに関係なく、毎回実行されます。あなたが最初の（の.done（）関数）に行われた後の2回目の呼び出しをトリガーする場合、またはその代わりに、あなたも拳のAJAX呼び出し（.success（）関数）の成功の機能を使用することができます欲しい

$.ajax({ 
     method: "GET", 
     url: url + "search?title="+requestData 
    }) 
    .done(function(data){ 
     ... 
    }) 
    .success(function(data){ 
     // second ajax call here! 
     // or all code here if you only want to work with the data if successful 
    }) 

EDIT： あなたのコードをより詳しく見て：私はあなたがする必要があるすべてはライン

$(document).ajaxSuccess(function(){ 

、その枠線外に取ると思います。しかし、サーバーがエラーを返した場合にdone関数も実行されるという事実について考えるべきです。

Answer 2

synchronous：$.ajaxのパラメータasync: falseとしてリクエストしてください。ここで

が示唆されたコードです：

$(document).ready(function(){ 
    $("#searchButton").click(function(){ 
     var requestData = $("#searchBox").val(); 
     var resultElement = $('#resultDiv'); 
     var url = "https://api.trello.com/"; 
     var member_id_list = ""; 

     $.ajax({ 
      async: false, 
      method: "GET", 
      url: url + "search?title=" + requestData, 
      success: function(data) { 
       $.each(data.items, function(key, value){ 
        if(value.member_id !== undefined){ 
         member_id_list += value.member_id + ";"; 
        } 
        resultElement.append($("<ul>").text(value.title)).append(value.body).addClass("question-body"); 
        $("ul").addClass("question-title"); 
       }); 
      } 
     }); 

     var member_id_list = member_id_list.slice(0, -1); 
     $.ajax({ 
      async: false, 
      method: "GET", 
      url: url + "/member/"+ member_id_list, 
      success: function(data) { 
       // Do whatever you need after the second request 
      } 
     }); 
    }); 
});