別のリクエストのデータに依存するAjaxリクエスト

Question

2番目のajaxリクエストで最初のデータを使用できるように、別の（.thenで）AJAXリクエストをネストしようとします。この場合、最初のajax呼び出しの座標を2番目のajax要求（マップ座標）に使用します。 変数はlattとlongです。

$(document).ready(function(){ 

    $('#submitWeather').click(function(){   
     var city= $("#city").val(); 
     var latt, long;    
     if(city !=''){     
      $.ajax({     
       url:'http://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" + "&APPID="....", 
       type: "GET", 
       dataType: "jsonp", 
       success: function(data){ 
        console.log(data);      
        var widget = show(data); 
        $("#show").html(widget);     
        latt = coord.lat; 
        long = coord.lon;      
       } 

      }).then($.ajax({ 

       url:'https://maps.googleapis.com/maps/api/js?key="..."&callback=initMap', 
       type: "GET", 
       dataType: "jsonp", 
       success: function initMap() { 
       var uluru = {lat: +latt+, lng: +long+}; 
       var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 4, 
       center: uluru 
      }); 
     var marker = new google.maps.Marker({ 
      position: uluru, 
      map: map 
     }); 
     }   
    }); 
    }else{     
     $("#error").html("<div class='alert alert-danger text-center'> The field cannot be empty, please enter a city! </div>"); 
    } 
}); 
}); 

Answer 1

2番目のajax呼び出しを関数にラップし、最初の呼び出しが成功した後に呼び出します。

 

    function secondajaxcall(latt, long){ 
    /** your second ajax call **/ 

    } 
    function firstajaxcall(){ 
    $.ajax({ 

      XXXXXXXX, 

       success: function(data){ 
        latt = data.lat; 
        long = data.long; 
        secondajaxcall(latt, long); /* CALL SECOND FUNCTION **/ 
       } 

      }) 


    } 
    firstajaxcall();