Problème d’étendue de variable JavaScript / jQuery avec des appels .ajax () nesteds

J’ai de la difficulté à transmettre la variable postData qui est un object de tableau jQuery sérialisé à un .ajax() enfant nested .ajax() . postData est passé avec succès au premier appel .ajax() , mais lorsque je tente de l’utiliser dans le deuxième appel .ajax() , il .ajax() aucun élément de formulaire, car la variable n’est pas définie à ce niveau:

 $(".myForm").submit(function () { var postData=$(this).serializeArray(); $.ajax({ type : "POST", async : false, cache : false, url : "./insertComment.php", data : postData, success: function() { $.ajax({ type : "POST", async : false, cache : false, url : "./getComments.php", data : postData, success: function(comments) { $(".Comments").html(comments); } }); } }); return false; }); 

J’ai essayé de créer une deuxième variable _postData essayant de la perpétuer lors du prochain appel .ajax() , mais cela a échoué (également essayé var _postData=$(this).parent().serializeArray(); mais je ne l’avais toujours pas. t capable de perpétuer la variable):

 $(".myForm").submit(function () { var postData=$(this).serializeArray(); $.ajax({ type : "POST", async : false, cache : false, url : "./insertComment.php", data : postData, success: function() { var _postData=$(this).serializeArray(); $.ajax({ type : "POST", async : false, cache : false, url : "./getComments.php", data : _postData, success: function(comments) { $(".Comments").html(comments); } }); } }); return false; }); 

J’ai essayé d’implémenter ce qu’on appelle la fermeture JavaScript (quelque chose que je n’aime pas encore complètement), mais cela a conduit à plus de variables non définies et à plus d’échecs:

 $(".myForm").submit(function () { var postData = function() { $(this).serializeArray(); }(); $.ajax({ type : "POST", async : false, cache : false, url : "./insertComment.php", data : postData, success: function() { $.ajax({ type : "POST", async : false, cache : false, url : "./getComments.php", data : postData, success: function(comments) { $(".Comments").html(comments); } }); } }); return false; }); 

J’ai essayé de chercher et essayé d’implémenter plusieurs autres techniques, y compris jQuery traversal ( .parent() , .filter() , etc.), mais sans succès. Je sais que c’est un problème commun à beaucoup de gens, mais je n’ai pas encore trouvé de solution simple et compréhensible. Toutes les suggestions seraient grandement appréciées. Merci!

• Comment détruire la première initialisation de datatable (DataTable dans un modal)
• Accéder à markLogic depuis un autre hôte local
• Sweetalert2 Ajax – Données post-entrée
• Conflits de données Ajax JSON et Lightbox
• Rejeter une promesse jQuery dans une méthode de réussite $ .ajax

• Téléchargement AJAX montrant la progression du seul fichier dans plusieurs téléchargements
• Mise en cache du navigateur IE et du plug-in jQuery Form
• Donner à un élément plusieurs noms / identifiants
• Ajax submit fait un post complet après la première soumission
• Comment passer un jeton d’access à un appel ajax

 $(".myForm").submit(function () { var postData=$(this).serializeArray(); $.ajax({ type : "POST", async : false, cache : false, url : "./insertComment.php", data : postData, success: (function(pData) { // capture the posted data in a closure var _postData = pData; return function() { $.ajax({ type: "POST", async: false, cache: false, url: "./getComments.php", data: _postData, success: function(comments) { $(".Comments").html(comments); } }); } })(postData) // execute the outer function to produce the colsure }); return false; }); 

 $(".myForm").submit(function () { var postData = $(this).serializeArray(); // Gets all of the form elements var myID = $(this.ID).val(); // Takes only a single value from the form input named ID $.ajaxSetup({ data : "ID=" + myID // Sets the default data for all subsequent .ajax calls }); $.ajax({ type : "POST", async : false, cache : false, url : "./insertComment.php", data : postData, // Overwrites the default form data for this one instance only, including all form elements success: function() { $.ajax({ type : "POST", async : false, cache : false, url : "./loadComments.php", // Notice there is no data: field here as we are using the default as defined above success: function(comments) { $(".Comments").html(comments); } }); } }); return false; });