Ajax mit xajax – Teil 2.3
Ein wichtiger Teil für die Nutzung von Ajax fehlt aber noch – die Verarbeitung von Formularen. Bei vielen Ajax-Anwendungen trägt man etwas in ein Formular ein und nach dem Abschicken passiert etwas ohne das die eigentliche Seite neuladen muss. Wie das mit Xajax geht zeigt das nächste Beispiel. Dort wird ein Login realisiert. Nach Klick auf den Login-Button werden die Eingaben an den Server geschickt – ist der Login erfolgreich so wird "Hello $username" ausgegeben und das Formular verschwindet. Ist der Login nicht erfolgreich so wird eine entsprechende Meldung ausgegeben und der Benutzer kann sich nochmals versuchen einzuloggen.
<?php
include("xajax.inc.php");
$xajax = new xajax();
function login($data) {
// (1) formular daten
$user = $data['user'];
$password = $data['password'];
$response = new xajaxResponse();
// (2) login …
if($loginSuccess) {
// (3) login erfolgreich
$response->addAssign("inhalt", "innerHtml", "Hallo ".$username."!");
}
else {
// (4) login nicht erfolgreich
$response->addAssign('info', 'value', 'Login fehlgeschlagen!');
$response->addAssign('submitButton', 'value', 'Nochmal');
$response->addAssign('submitButton', 'disabled', false);
$response->addAssign('userInput', 'disabled', false);
$response->addAssign('userPassword', 'disabled', false);
}
return $response->getXML();
}
$xajax->registerFunction("login");
$xajax->processRequests();
?>
<html>
<head>
<title>ajax mit xajax</title>
<? $xajax->printJavascript(); ?>
<script type="text/javascript">
function doLogin() {
// (5) Formular lokal manipulieren und abschicken
xajax.$('submitButton').value = 'Bitte warten…';
xajax.$('submitButton').disabled = true;
xajax.$('userInput').disabled = true;
xajax.$('userPassword').disabled = true;
xajax_login(xajax.getFormValues("loginForm"));
return false;
}
</script>
</head>
<body>
<div id="inhalt">
<span id="info"> </span><br />
<form onSubmit="doLogin()" id="loginForm">
Benutzer:
<input type="text" name="user" id="userInput"><br />
Passwort:
<input type="password" name="password" id="passwordInput"><br />
<input type="submit" value="Login" id="submitButton">
</form>
</div>
</body>
</html>
Was passiert diesmal? Wir definieren abermals eine PHP-Funktion, diesmal mit dem Namen "login". Diese Funktion bekommt einen Parameter übergeben (data), der unsere Formulardaten enthält. Woher diese kommen schauen wir uns später an. In (1) übernehmen wir die Logindaten aus dem Array in lokale Variablen und erzeugen das Response-Objekt.
In (2) würde der eigentliche Login stattfinden, bspw. eine Datenbank zu den Daten abgefragt werden. Dieser Teil ist nicht im Beispiel, weil dies mit Ajax selbst nichts zu tun hat. Im weiteren Verlauf wird angenommen, dass der Login-Teil eine Variable $loginSuccess auf true setzt für einen erfolgreichen Login und auf false für einen nicht erfolgreichen Versuch.
War der Versuch also erfolgreich, dann setzen wir in (3) den Inhalt unseres <div> mit der id "inhalt" auf "Hallo $username!". In (4) geben wir, falls der Login nicht erfolgreich war, eine Fehlermeldung in ein Extra-Element mit der id "info". Anschließend wird das Formular zurückgesetzt, wofür genau, dafür schauen wir uns am besten jetzt mal (5) an.
Dort haben wir eine eigene JavaScript-Funktion geschrieben, die mittels des onSubmit-Attribut des form-Element das Abschicken des Formulars für uns abfängt. Auf den ersten Blick scheint das ganze etwas kryptisch auszusehen, aber eigentlich rufen wir eine Funktion $() auf, die uns das xajax-JavaScript-Objekt zur Verfügung stellt. Die $()-Funktion ist eigentlich nur eine Abkürzung für document.getElementById() und liefert uns also eine Objektrepräsentation eines Elements an Hand seiner ID.
Wir holen uns also 3 Elemente: Zunächst den Submit-Button, dessen Text wir von "Login" auf "Bitte warten…" setzen. Zusätzlich deaktivieren wir ihn, damit der Benutzer nicht erneut drauf klicken kann. Dann holen wir uns die Eingabefelder für Benutzername und Passwort. Auch diese deaktivieren wir.
Schließlich rufen wir die von Xajax erzeugte Funktion xajax_login auf, die sich darum kümmert unsere login()-PHP-Funktion auf dem Server aufzurufen. Als Parameter müssen wir noch die Formulardaten als Array übergeben – dabei hilft uns wiederum eine einfache Methode des Xajax-Objekt: getFormValues(). Dieser Methode brauchen wir nur noch die ID des Formulars übergeben und den Rest übernimmt nun wieder Xajax.
Abschließend nochmal zurück zu (4). Da wir die Formularfelder und den SubmitButton deaktivieren, müssen wir diese bei einem Fehlversuch wieder aktivieren, damit der Benutzer überhaupt die Möglichkeit hat sich noch einmal einzuloggen und dies ist was Dort passiert. Statt auf "Login" setzen wir den SubmitButton-Text diesmal auf "Nochmal" und aktivieren ihn sowie die Eingabefelder wieder.
dfasdf
ah, ja
irgendwie habe ich das problem, dass trotz der korrigierten kleinen tippfehler die php-funktion login nicht aufgerufen wird. *need help*
hallo, habe auch ein kleines problemchen. Bist du sicher, dass das Beispiel so korrekt ist. Auch bei mir wird die Funktion nicht ausgeführt?…bräuchte auch nen kleines bissi Hilfe – der debugger zeigt an alles wäre okay.
Nope, das funktioniert so auch nicht … wo der Fehler ganz genau liegt hab ich auch noch nicht rausgefunden, ist wohl an mehreren Stellen was falsch. Ich wuerd mir einfach die Multiply Examples angucken und umschreiben, fertig
Gruesse, artemis
Das liegt daran, dass das “false” aus der Javascript-Funktion so nicht korrekt weitergegeben wird.
Wenn man aus:
das hier macht:
funktioniert es
Grüße
Christian
ja… offensichtlich nimmt er das javascript nicht ^^
also, da steht: onSubmit gleich doLogin
richtig wäre: onSubmit gleich return doLogin
hoffe es klappt jetzt
Hmm, also nach Behebung sämtlicher Schreibfehler (falsche Benennung der Formularfelder, innerHTML statt innerHtml …) bleibt das Problem, dass bei mir (neuster Firefox wie auch IE 7) die Formulardaten offenbar nicht in der PHP-Funktion ankommen… Jemand nen korrekten Quellcode irgendwo?
[...] XaJax Login mit Datenbankanbindung Hi, hier ein Tutorial zu xajax, dass sich mit einem Login befasst. Vielleicht hilft es weiter. Ciao Quaese [...]
[...] Ajax mit Xajax – Teil 2.3 Posted by AntiHype Filed in Ajax, Hype, Internet, PHP, Web 2.0 Tags: Ajax, JavaScript, PHP, Xajax [...]