Question

我遇到异步$ .ajax请求的问题。我正在尝试从restaurant-location.php下载JSON数据并将数据加载到数组locations中。然后我需要通过initMap函数中的这个数组进行iterrate。当我将数组locations打印到控制台时，我得到undefined结果。我认为问题在于回调功能，但我无法弄明白。任何帮助将不胜感激！

var locations = []; 

window.onload = function downloadLocations() {
  $.ajax({
     type: "GET",
      url: '/restaurant-locations.php',
       success: function(data) {
          console.log(locations); //will print out the location array
          initMap(data)
       },
  });
} 
console.log(locations); //will NOT print out the location array

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(10,-10),
  zoom: 15

for ( var i = 0; i < locations.length; i++ ) {

    var street = locations[i].street;
    var city= locations[i].city;

more code ....

}

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&v=3&callback=initMap">
</script>

Answer 1

~~您在回调中再次定义位置~~（已编辑）

 success: function(data) {
      //!!!!!var locations = data;//do not do this
      //do this instead:
      locations = data;
      console.log(locations); //will print out the location array
      //and call initMap() here!!!
      initMap();
      //or better, just pass the result to initMap here:
      initMap(data); //and use the variable in your initMap function
   },

Answer 2

只有在成功完成ajax调用后才会调用您的成功回调，而在发送ajax请求后执行ajax调用后立即调用console.log（请注意ajax调用是异步的，不会等到完成后再执行ajax之后的语句。）因此，当ajax方法调用之后的控制台日志位置不会填充该位置。将要使用位置数据的所有代码移动到成功回调内部，或者在ajax方法的参数中使用async：false使ajax调用同步。（不建议使用同步ajax方法。我建议更好地移动所有您希望处理位置数据到成功回调内部的代码）

异步下载并回拨$ .ajax

2 个答案: