2010-06-23 5 views
5

Firebug zeigt die richtige Antwort, wenn diese Funktion aufgerufen wird, jedoch gibt es nichts zurück ... (diese $ .get (...) - Funktion wurde außerhalb der Funktion getestet usernameExists() aber ohne die Rückkehr und es funktionierte perfekt).jQuery Funktion zum Zurückgeben von wahr/falsch erhalten

Was ist das Problem und wie zu lösen?


 $(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 

}); 

Antwort

8

Die Funktion, die Sie fordern nicht alles zurück.

Auch wenn es versucht, die Antwort von Ihrem $.get() zurückzugeben, würde es nicht funktionieren, da der Aufruf asynchron ist, also zu der Zeit die Antwort empfangen wurde, hat Code, der den Rückgabewert verwendet haben, wahrscheinlich bereits hingerichtet.

Was Sie tun müssen, ist rufen Sie Ihren Code aus dem $.get() Rückruf.

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 
} 

auf Ihrem Kommentar basiert aktualisiert.

Wahrscheinlich besser, nur die $.get() in die submit() zu bringen, aber Ihrer ursprünglichen Idee treu bleiben, so könnte es aussehen.

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 
       } 
      } 
    ); 
} 

Erläuterung der Freude synchroner vs. Asynchronous JavaScript

Javascript-Code normalerweise synchron ausführt. Das bedeutet nur, dass es jeweils eine Zeile ausführt, oder eine Zeile muss ausgeführt werden, bevor die nächste Zeile ausgelöst werden kann.

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

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

Dies macht die Dinge sehr schön und vorhersehbar. Aber es gibt einige Ausnahmen von dieser Regel. Eine bemerkenswerte Ausnahme sind AJAX-Aufrufe.

Ihr $.get() ist ein Beispiel für einen AJAX-Anruf. Das "A" in AJAX steht für asynchron, was bedeutet, dass es die Ausführung der nächsten Codezeile nicht verhindert.

Die Verästelung ist, dass, wenn Sie ein $.get() tun, die (zum Beispiel) 1 Sekunde dauert, was auch immer Code kam, nachdem die $.get() lang durch die Zeit seit beendet hat die $.get() seine Antwort erhalten hat.

Nehmen Sie das vorherige greeting Beispiel, aber diesmal mit 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. 

Wie Sie lange sehen können, hätte die alert(greeting) ausgeführt, bevor die $.get() Antwort empfangen wurde, weil er $.get() asynchron ist, und die Ausführungskette nicht unterbrechen, während es für seine Daten wartet.

Um dies zu beheben, können Sie die alert()innerhalb der Rückruf für $.get() platzieren würde, so dass sie nicht ausgeführt wird, bis die Antwort empfangen wird.

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

Das Ergebnis ist, dass in Ihrem Code, wenn Sie rufen $.get(), alle verbleibenden Code, der auf die Antwort beruht erhalten sollte innerhalb der Rückruf stattfinden.

Der einzige Weg, Ihren Code außerhalb der Rückruf es in seiner eigenen Funktion zu platzieren wäre zu platzieren, die von innerhalb der Rückrufs (wie ich mit meiner ursprünglichen Antwort tat) aufgerufen werden.


Grund Layout, wie Sie Ihren Code arbeiten soll:

Denken Sie daran, dass Sie nicht unbedingt eine eigene Funktion für usernameExists() benötigen. Sie könnten in der

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 submit() alles Code platzieren - Das wird nicht funktionieren, weil 'usernameExists()' gibt nichts zurück. Und falls ja, würde die 'if()' Anweisung in Ihrem 'submit()' ausgeführt werden bevor die Antwort empfangen würde. Grundsätzlich müssen Sie * irgendeinen * Code behalten, der auf die Antwort von Ihrem '$ .get()' innerhalb des Callbacks beruht. Oder rufen Sie eine andere Funktion aus dem Rückruf, wie meine Antwort. Ich werde meine Antwort mit einer anderen Lösung aktualisieren. – user113716

+0

@cthulhu - Sie müssen verstehen, dass Sie * nicht versuchen müssen, einen Wert aus der Funktion 'usernameExists()' zurückzugeben. Es wird einfach nicht funktionieren. Sie müssen den Rest Ihrer Codeausführung innerhalb dieser Funktion ausführen. Wenn Sie nicht verstehen, warum das so ist, lassen Sie es mich wissen, und ich würde Ihnen gerne ein anderes Beispiel geben, das vielleicht besser erklärt. – user113716

+0

@cthulhu - Kein Problem. : o) Ich werde meine Antwort in ein paar Minuten mit einem Beispiel am Ende aktualisieren, das das Problem genauer beschreibt. – user113716

Verwandte Themen