getJSON Synchrone

OBJECTIF: Ce que je veux, c’est obtenir des données de la firebase database et actualiser le fichier main.php (plus évident grâce à draw_polygon) chaque fois que quelque chose est ajouté dans la firebase database (après $ .ajax à submit_to_db.php).

Donc, fondamentalement, j’ai un fichier main.php qui va appeler ajax un autre php pour recevoir un tableau qui sera sauvegardé dans la firebase database, et un appel json qui appelle un autre php pour renvoyer un tableau sera utilisé par main.php.

$(document).ready(function() { get_from_db(); $('#button_cancel').click(function(){ $.ajax({ url: 'submit_to_db.php', type: 'POST', data: {list_item: selected_from_list}, success: function(result){ ... get_from_db(); } }); }); function get_from_db(){ $.getJSON('get_from_db.php', function(data) { ... draw_polygon(data); }); } });

Dans mon cas, ce que j’ai fait était un get_from_db fonction get_from_db pour que getJSON obtienne réellement les données de la firebase database, avec les données à utiliser pour draw_polygon . Mais est-ce ainsi que cela devrait être fait? Je suis un débutant et c’est la première fois que getJSON et ajax pour être honnête. Alors ma question: comment fonctionne le travail asynchrone? Existe-t-il une autre solution de contournement pour cela au lieu de devoir appeler la fonction get_from_db avec getJSON (ce n’est pas synchrone, n’est-ce pas? Est-ce pour cela qu’elle ne met pas à jour la page lorsqu’elle ne fait pas partie d’une fonction?) Tout le temps – comme $.ajax avec async: false (je ne pouvais pas le faire fonctionner en passant). Mon approche fonctionne, mais je pensais qu’il y avait peut-être d’autres meilleures façons de le faire. J’aimerais apprendre comment. Merci d’avance. J’espère que j’ai un sens.

Pour que ce soit plus clair, voici ce que je veux réaliser:

@start of page, récupère les données de la firebase database (actuellement via getJSON )
Peindre ou dessiner sur une canvas à l’aide des data
Quand je clique sur le bouton Terminé, la firebase database sera mise à jour.
Je veux obtenir automatiquement les données à nouveau pour repeindre les modifications dans la canvas.

Asynchronusly signifie que la requête s’exécute en arrière-plan et rappelle votre fonction lorsqu’elle reçoit une réponse. Cette méthode est préférable si vous voulez avoir un résultat mais permettre d’utiliser votre application dans la requête. Si vous souhaitez avoir une réponse directe, jetez un coup d’œil à une demande de synchronisation. cette demande suspendra l’exécution du script jusqu’à ce qu’elle reçoive une réponse, et l’utilisateur ne peut rien faire jusqu’à ce que la réponse soit reçue. Vous pouvez l’activer via:

 async: false,

Donc par exemple:

 $.ajax({ url: "myurl", async: false, ... })

Puisque $ .getJSON () utilise des configurations ajax, il suffit de définir les configurations globales ajax:

 // Set the global configs to synchronous $.ajaxSetup({ async: false }); // Your $.getJSON() request is now synchronous... // Set the global configs back to asynchronous $.ajaxSetup({ async: true });

$ .getJSON (), n’accepte pas de configuration, comme il est dit dans la documentation, c’est une version abrégée de:

 $.ajax({ dataType: "json", url: url, data: data, success: success });

Il suffit donc de réécrire votre demande en termes de cela et async: false fonctionnera comme prévu.

$.getJSON() est une notation abrégée pour $.ajax() qui peut être configurée pour être synchrone (voir jQuery.getJSON et JQuery.ajax ):

 $.ajax({ dataType: "json", url: url, data: data, async: false, success: function(data) { ... draw_polygon(data); } });

Essayez d’ éviter les appels synchrones cependant. Citation de la documentation jQuery (voir prop asynchrone) :

Les requêtes interdomaines et dataType: Les requêtes “jsonp” ne prennent pas en charge le fonctionnement synchrone. Notez que les requêtes synchrones peuvent verrouiller temporairement le navigateur, désactivant toute action pendant que la requête est active.

Vous voudrez peut-être essayer jQuery Deferreds comme ceci:

 var jqxhr = $.getJSON(url); jqxhr.done(function(data) { ... draw_polygon(data); });