JavaScript / jQuery Variable Scope Problema con le chiamate Nested .ajax ()

Ho difficoltà a passare la variabile postData che è un object array jQuery serializzato a una chiamata .ajax() child nidificata. postData è passato con successo alla prima chiamata .ajax() , ma quando provo ad usarlo nella seconda chiamata .ajax() , non inserisce alcun elemento del modulo, poiché la variabile non è definita a quel livello:

 $(".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; }); 

Ho provato a creare una seconda variabile _postData tentava di perpetuare la variabile alla prossima chiamata .ajax() , ma non è var _postData=$(this).parent().serializeArray(); (anche provato var _postData=$(this).parent().serializeArray(); ma non lo ero ancora t in grado di perpetuare la variabile):

 $(".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; }); 

Ho provato a implementare la cosiddetta chiusura JavaScript (qualcosa che non riesco ancora a completare completamente), ma che ha portato a variabili più indefinite e più errori:

 $(".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; }); 

Ho provato a cercare in giro e provato a implementare diverse altre tecniche, tra cui jQuery traversal ( .parent() , .filter() , ecc.), Ma non ha avuto successo. So che questo è un problema comune per molte persone, ma finora non ho trovato una soluzione semplice e comprensibile. Ogni suggerimento sarà molto apprezzato. Grazie!

Prova questo:

 $(".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; }); 

Ecco cosa ho finito per fare:

 $(".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; });