Est-il possible d’attendre la réponse AJAX et d’interrompre l’exécution?

Tous les appels Ajax peuvent être effectués de manière asynchrone (avec une fonction de rappel, il s’agit de la fonction spécifiée après la touche “succès”) ou de manière synchrone – bloquant et attendant effectivement la réponse du serveur. Pour obtenir une exécution synchrone, vous devez spécifier

 async: false 

comme décrit ici

Notez cependant que dans la plupart des cas, l’exécution asynchrone (via callback en cas de succès) convient parfaitement.

La réponse simple est de désactiver l’ async . Mais c’est la mauvaise chose à faire. La bonne réponse est de repenser la façon dont vous écrivez le rest de votre code.

Au lieu d’écrire ceci:

 function functABC(){ $.ajax({ url: 'myPage.php', data: {id: id}, success: function(data) { return data; } }); } function foo () { var response = functABC(); some_result = bar(response); // and other stuff and return some_result; } 

Vous devriez l’écrire comme ceci:

 function functABC(callback){ $.ajax({ url: 'myPage.php', data: {id: id}, success: callback }); } function foo (callback) { functABC(function(data){ var response = data; some_result = bar(response); // and other stuff and callback(some_result); }) } 

C’est-à-dire que, au lieu de renvoyer le résultat, transmettez dans le code ce qui doit être fait en tant que rappels. Comme je l’ai montré, les rappels peuvent être nesteds à autant de niveaux que vous avez d’appels de fonction.

Une brève explication de la raison pour laquelle je dis qu’il est faux de désactiver l’async:

Désactiver async gèlera le navigateur en attendant l’appel ajax. L’utilisateur ne peut rien cliquer, ne peut pas faire défiler l’écran et, dans le pire des cas, s’il manque de mémoire, il arrive parfois que l’utilisateur fait glisser la fenêtre hors de l’écran et l’entraîne de nouveau, il voit des espaces vides, car le navigateur est gelé et ne peut pas redessiner. Pour les navigateurs à thread unique comme IE7, c’est encore pire: tous les sites Web se bloquent! Les utilisateurs qui rencontrent ce problème peuvent penser que votre site est un buggy. Si vous ne voulez vraiment pas le faire de manière asynchrone, effectuez simplement le traitement dans le back-end et actualisez la page entière. On aurait au moins l’impression de ne pas avoir de buggy.

Si vous pouvez utiliser des promesses, vous pouvez également utiliser une chaîne de promesses.

 function functABC() { return new Promise(function(resolve, reject) { $.ajax({ url: 'myPage.php', data: {id: id}, success: function(data) { resolve(data) // Resolve promise and go to then() }, error: function(err) { reject(err) // Reject the promise and go to catch() } }) } } functABC().then(function(data) { // Run this when your request was successful console.log(data) }).catch(function(err) { // Run this when promise was rejected via reject() console.log(err) }) 

Utilisez l’atsortingbut async:false avec l’URL et les données. cela aidera à exécuter immédiatement un appel ajax et vous pourrez récupérer et utiliser les données du serveur.

 function functABC(){ $.ajax({ url: 'myPage.php', data: {id: id}, async:false success: function(data) { return data; } }); } 

Méthode 1:

 function functABC(){ $.ajax({ url: 'myPage.php', data: {id: id}, success: function(data) { return data; }, complete: function(){ // do the job here } }); } var response = functABC(); 

Méthode 2

 function functABC(){ $.ajax({ url: 'myPage.php', data: {id: id}, async: false, success: function(data) { return data; } }); // do the job here } 

Il n’est pas nécessaire d’attendre une réponse Ajax. Vous pouvez charger vos données dans la section head de votre application:

 function functABC(){ $.ajax({ url: 'myPage.php', data: {id: id}, success: function(data) { sessionStorage.setItem('mydata', data); } }); } 

Ensuite, une fois l’événement window.load déclenché, vos données seront disponibles:

 alert(sessionStorage.getItem('mydata'));