Jquery $ .post() variable portée

Question

Je ne suis pas massivement expérimenté avec JavaScript et j'ai des problèmes avec la portée variable et jquery. J'ai la structure suivante:

function pass_variables() 
{ 
    username = "efcjoe" 
    response = post_variables(username) 
    alert(response) 
} 

function post_variables(username) 
{ 
    $.post(
     '/path/to/url/', 
     { 
      'username': username, 
     }, 
     function(data) 
     { 
      valid = (data != 0) ? true : false 

      // OPTION 1: If I put return here... 
      return valid; // ... the alert box in pass_variables says "undefined" 
     }, 
     "text" 
    ); 

    // OPTION 2: If I put return here... 
    return valid; // ... The alert box does not pop up, and Safari debug gives 
        //  me the error: "Can't find variable: valid" 
} 

Ai-je manqué quelque chose? Je pense que valid devrait être une variable globale, et donc l'option 2 devrait fonctionner correctement. Je ne suis pas vraiment sûr de l'option 1.

Quelqu'un peut-il me donner des conseils sur la meilleure façon de fonctionner?

Merci beaucoup.

Answer 1

Dans votre l'option 1 vous revenez de la fonction de rappel , et sa valeur de retour n'est jamais utilisée car cette fonction n'est appelée que lorsque la requête Ajax se termine.

Dans l'option , vous revenez de votre fonction principale, mais ce retour se produit avant que la fonction de rappel n'attribue une valeur à votre variable valid.

Je factoriser votre code de cette façon, sans utiliser des variables globales:

function post_variables(username){ 
    $.post('/path/to/url/',{ 
    'username': username, 
    }, 
    function(data){ 
    var valid = data != 0; 

    // OPTION 3: Work in the callback function 
    alert(username); 
    alert(valid); 

    // OPTION 4: Pass the values and work on another function 
    otherFunction(username, valid); 
    },"text"); 
} 

function otherFunction(username, isValid){ 
    //... 
} 

Answer 2

Les appels Ajax sont asynchrones, ce qui signifie qu'ils sont appelés mais attendent que l'exécution soit terminée. Fondamentalement, votre alerte se déclenche avant que la requête ajax ne soit terminée et exécute la fonction de rappel pour changer votre variable. La meilleure chose à faire est de passer une fonction à exécuter lorsque la requête ajax est terminée. Cela évite également la nécessité pour les variables globales qui sont mal vus depuis d'autres plug-ins, le script peut modifier leur état et de laisser votre script ouvert à des erreurs, des défauts etc

Par exemple,

function foobar(){ 

    //call function to do post request and also pass a function to run 
    //when post has returned 
    runPostRequest(callbackFn); 

} 

function runPostRequest(callback){ 

    $.post('/foo', callback); 

} 

function callbackFn(data){ 

    console.log('post request complete'); 

} 

Answer 3

Oui, votre problème est que vous Je ne comprends pas certains problèmes liés à l'ordre des opérations ici. La fonction que vous transmettez à $.post est un rappel ; il fonctionne plus tard, considérablement après post_variables() finit. post_variables() lui-même n'attend pas que le $.post se termine, donc valid n'existe pas lorsque vous essayez de l'utiliser. Rappelez-vous que AJAX est asynchrone.

Answer 4

Le return valid; est exécuté immédiatement après que le $.post() est configuré, mais avant que le message soit terminé (et par conséquent, avant que valid est défini). Ce que vous voulez sans doute faire est la suivante:

function post_variables(username) 
{ 
    var username = "efcjoe"; 

    $.post(
     '/path/to/url/', 
     { 
      'username': username, 
     }, 
     function(data) 
     { 
      var valid = (data != 0) ? true : false 
      alert(valid); 
     }, 
     "text" 
    ); 
} 

Et notez que ce n'a plus besoin de variables globales, mais les variables fonction étendue qui sont déclarées à l'aide var.

Answer 5

Vous pouvez résoudre le problème assez facilement en lui attribuant une fonction au lieu d'une ligne une, et la fonction d'événement ne l'alerte:

function pass_variables() 
{ 
    username = "efcjoe" 
    response = post_variables(username); 
} 

function post_variables(username) 
{ 
    $.post(
     '/path/to/url/', 
     { 
      'username': username, 
     }, 
     receivedData, 
     "text" 
    ); 
} 

function receivedData(data) 
{ 
    valid = (data != 0) ? true : false; 
    alert(valid) 
}