Ajax请求取决于来自另一个请求的数据

时间:2017-09-25 09:42:06

标签: jquery ajax

我尝试将ajax请求嵌套在另一个(使用.then)中,这样我就可以在第二个ajax请求中使用第一个请求的数据。在这种情况下,我想使用第一个ajax调用的坐标来调用第二个ajax请求(地图坐标)。 变量是格子和长。

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

1 个答案:

答案 0 :(得分:0)

只需将第二个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();