téléchargement asynchrone et rappellerons .ajax

$ J'ai un problème avec la demande asynchrone .ajax de $. Je suis en train de télécharger des données JSON de restaurant-location.php et charger les données dans un tableau locations. Ensuite, j'ai besoin d'itérer à travers ce tableau à l'intérieur de la fonction initMap. Lorsque j'imprime le tableau locations dans la console, j'obtiens le résultat undefined. Je suppose que le problème est avec une fonction de rappel, mais je ne peux pas le comprendre. Toute aide serait grandement appréciée!téléchargement asynchrone et rappellerons .ajax

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>

Source

2017-02-04 Luke

C'est becase fonction de la réussite n'est pas appelé jusqu'à ce que ajax est fait exécuter d'autre part, la fonction console.log après onLoad est appelé tout de suite. D'ici là, les emplacements n'ont pas de valeur! – Gacci

ajax est ** asynchrone **. Ne peut pas manger une pizza avant qu'il ne soit livré – charlietfl

~~Vous définissez à nouveau les emplacements dans votre rappel~~ (ce que vous avez modifié)

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 
    },

Source

2017-02-04 22:55:13 Rienk

Je ne suis pas sûr si je devrais appeler le initMap à l'intérieur de la fonction 'Success'. J'initialise le 'initMap' avec' async defer' à la fin de mon code. J'ai ajouté ce code dans mon exemple de code en bas. Devrais-je supprimer le 'async defer'? – Luke

Je ne connais pas le report asynchrone, ne l'utilisez jamais. Mais je sais que si vous avez besoin des données de votre appel ajax dans votre fonction initMap, vous devriez l'appeler dans votre bloc de succès. – Rienk

Votre rappel de succès sera appelé qu'après avoir réussi appel ajax alors que le console.log immédiatement après ajax appel est exécuté après la demande de paiement ajax est envoyé (s'il vous plaît noter que l'appel ajax est asynchrone et ne pas attendre jusqu'à la fin pour exécuter l'instruction suivante après ajax.) Ainsi, lorsque le journal de la console de l'emplacement juste après appel de la méthode ajax sera pas le lieu peuplé . Soit déplacer tout le code que vous voulez travailler avec des données de localisation à l'intérieur de la fonction de rappel de succès ou faire de la synchronisation d'appel ajax en utilisant async. False dans le paramètre à la méthode ajax (méthode synchrone ajax est pas recommandé si je suggère de mieux déplacer tous. le code que vous souhaitez travailler sur des données de localisation pour rappel de succès à l'intérieur)

Source

2017-02-04 23:20:21

téléchargement asynchrone et rappellerons .ajax

Répondre

Questions connexes