2010-06-23 4 views
5
$(document).ready(function(){ 
//global vars 
var name = $("#username"); 
    var email = $("#email"); 


function usernameExists() { 
    $.get("register.php",{ check: 1, username: name.val(), email: email.val() } ,function(m) { 
     if(m==1) { 
    return false; 
    } else { 
    return true; 
    } 
    }); 
} 
}); 

Firebug affiche la bonne réponse lorsque cette fonction est appelée, mais elle ne renvoie rien ... (cette fonction $ .get (...) a été testée en dehors de la fonction usernameExists() mais sans les retours et cela a fonctionné parfaitement).jQuery obtenir la fonction pour renvoyer vrai/faux

Quel est le problème et comment résoudre?


 $(document).ready(function(){ 
    //global vars 
    var form = $("#register"); 
    var name = $("#username"); 
    var email = $("#email"); 

    $.get("register.php", 
      { check: 1, username: name.val(), email: email.val() }, 

       // Have this callback take care of the rest of the submit() 
      function(m) { 
       if(m==1) { 
        form.submit(function(){ return false; }); 
       } else { 
        form.submit(function(){ 
     if(validateName() & validateEmail() & validatePass1() & validatePass2()) 
      return true 
     else 
      return false; 
       }); 
      } 

     } 
    ); 

function validateName(){ 
     // some check here 
    } 

// and other functions 

}); 

Répondre

8

La fonction que vous appelez ne retourne rien.

Même si elle a essayé de retourner la réponse de votre $.get(), cela ne fonctionnerait pas parce que l'appel est asynchrone, le temps a été reçu la réponse, quel que soit le code qui aurait utilisé la valeur de retour a probablement déjà réalisé.

Ce que vous devez faire est d'appeler votre code depuis le rappel $.get().

function usernameExists() { 
    $.get("register.php",{ check: 1, username: name.val(), email: email.val() } ,function(m) { 
      someOtherFunction(m==1); 
    }); 
} 

function someOtherFunction(parameter) { 
    // The parameter will be true or false 
    // depending on the value of m==1 
} 

jour à base de votre commentaire.

Probablement préférable d'apporter le $.get() dans le submit(), mais en restant fidèle à votre idée originale, voici à quoi cela pourrait ressembler.

form.submit(function(){ 
     // After usernameExists() is called, we need to hand off 
     // the rest of the execution to that function since 
     // this one will be done executing before the get() 
     // response is received 
    usernameExists(); 
    return false; 
}); 

function usernameExists() { 
    $.get("register.php", 
      { check: 1, username: name.val(), email: email.val() }, 

       // Have this callback take care of the rest of the submit() 
      function(m) { 
       if(m==1) { 
        // do something if true 
       } else { 
        // do something if false 
       } 
      } 
    ); 
} 

Explication des plaisirs de javascript synchrone par rapport asynchrone

code Javascript exécute normalement de manière synchrone. Cela signifie simplement qu'il exécute une ligne à la fois, ou qu'une ligne doit terminer l'exécution avant que la ligne suivante puisse se déclencher.

var greeting = "hi there"; // set the greeting variable 

alert(greeting); // the alert won't fire, 
        // until the previous line finished successfully 

Cela rend les choses très agréables et prévisibles. Mais il y a quelques exceptions à cette règle. Une exception notable est les appels AJAX. Votre $.get() est un exemple d'appel AJAX. Le "A" dans AJAX signifie asynchrone, ce qui signifie qu'il n'empêche pas l'exécution de la prochaine ligne de code.

Le est que lorsque ramification vous faites une $.get() qui prend (par exemple) 1 seconde pour terminer, quel que soit le code est venu après la $.get() a depuis longtemps terminé au moment où le $.get() a reçu sa réponse. Prenez l'exemple précédent greeting, mais cette fois en utilisant AJAX.

var greeting; // will hold the response from our AJAX call 

$.get('some/path/to/data.php', 
     function(m) { 
      greeting = m; // populate the greeting variable with the data returned 
     } 
); 

alert(greeting); // Will alert "undefined" instead of the data that was returned 
        // because the $.get() code above is asynchronous, which allows 
        // the code below it (the alert in this case) to continue 
        // executing. 

Comme vous pouvez le voir, le alert(greeting) aurait exécuté bien avant que la réponse $.get() a été reçue, parce qu'il $.get() est asynchrone, et ne suspend pas la chaîne d'exécution alors qu'il attend ses données.

Pour résoudre ce problème, vous devez placer le alert()dans le rappel pour $.get(), de sorte qu'il ne fonctionnera pas jusqu'à ce que la réponse est reçue.

var greeting; // will hold the response from our AJAX call 

$.get('some/path/to/data.php', 
     function(m) { 
      greeting = m; // populate the greeting variable with the data returned 
      alert(greeting); // Now the alert will give the expected result 
           // because it is in the callback. 
     } 
); 

Le résultat est que dans votre code, une fois que vous appelez $.get(), tout code restant qui repose sur la réponse reçue devrait avoir lieu à l'intérieur le rappel.

La seule façon de placer votre code en dehors le rappel serait de le placer dans sa propre fonction qui est appelée à partir de l'intérieur le rappel (comme je l'ai fait avec ma réponse initiale).


mise en page de base de la façon dont votre code devrait fonctionner:

Gardez à l'esprit que vous ne devez pas nécessairement une fonction distincte pour usernameExists(). Vous pouvez placer tout ce code à l'intérieur du submit()

form.submit(function() { 
     // Check to make sure input is valid **before** you send the AJAX 
    if(validateName() & validateEmail() & validatePass1() & validatePass2()) { 
     usernameExists(); // If valid, continue with the usernameExists() 
    } 
    return false; // We return false whether or not the content was valid, 
        // in order to prevent the form from submitting prematurely 
}); 

function usernameExists() { 
    $.get("register.php", 
      { check: 1, username: name.val(), email: email.val() }, 

       // Have this callback take care of the rest of the submit() 
      function(m) { 
        // If "m" is less than one, there were no existing users 
        // so we can go ahead and post the data to the server 
       if(parseInt(m) < 1) { 
        // Here, you would need to manually do a post to 
        // submit the data to the server 
        $.post(url, data, callback, datatype); 
       } 
      } 
    ); 
} 

http://api.jquery.com/jquery.post/

+1

@cthulhu - Cela ne fonctionne pas parce que 'usernameExists()' ne retourne rien. Et event si c'est le cas, l'instruction 'if()' dans votre 'submit()' serait exécutée avant que la réponse ne soit reçue. Fondamentalement, ce que vous devez faire est de garder * any and all * code qui repose sur la réponse de votre '$ .get()' dans le rappel. Ou appelez une autre fonction à l'intérieur du rappel, comme ma réponse. Je mettrai à jour ma réponse avec une autre solution. – user113716

+0

@cthulhu - Vous devez comprendre, vous * ne devez pas * essayer de renvoyer une valeur de la fonction 'usernameExists()'. Cela ne marchera tout simplement pas. Vous devez faire le reste de votre exécution de code * dans * cette fonction. Si vous ne comprenez pas pourquoi c'est le cas, faites-le moi savoir, et je serais heureux de vous donner un exemple différent qui pourrait expliquer mieux. – user113716

+0

@cthulhu - Pas de problème. : o) Je mettrai à jour ma réponse dans quelques minutes avec un exemple en bas qui décrit plus complètement le problème. – user113716

Questions connexes