Login via Ajax überprüfen

Schoggimaendli

Hallo zusammen,

Ich bin gerade dabei eine Login-Abfrage mittels eines Ajax-Requests zu bearbeiten.
Mein Problem liegt darin, dass anscheinend das Ajax Script fehlerhaft ist - ich jedoch den Fehler nicht finde.
Die Loginabfrage funktioniert einwandfrei.

Mein Ajax-Request sieht folgendermassen aus:

Code

function doLogin()
{
    alert("HERE");
   	var ajax = new Ajax.Request('sites/loginfunction/check_login.php',
			{
				method:			'GET',
				contentType: 	'application/x-www-form-urlencoded',
				parameters:		'username=' + $('username').value + '&password=' + MD5($('password').value),
				onSuccess:		function(r){
				                    alert("inside");
									if(r.responseText=="1")
									{
										loginOK();
									}
									else
									{
										loginFALSE();
									}
									alert(r.responseText);
								},
				onFailure:		function(r){
									alert('Please reload the site and try again');
								}
			});
}

Alles anzeigen

alert("HERE"); wird noch afgerufen - zu inside komme ich allerdings nichtmehr.

Es scheint so als ob die Anfrage einen Fehler aufweist mir den aber nicht anzeigt.

Gruss,

€: das ganze sieht ja schlecht formatiert aus.. Hier mal der pastebin Link http://pastebin.com/vSyS8y9Y

Dodo

Was sagt die Fehlerkonsole deines Browsers?

Schoggimaendli

Uncaught exception: TypeError: Cannot convert '$('username')' to object
Error thrown at line 44, column 4 in doLogin() in http://xxxxx.js:
var ajax = new Ajax.Request('sites/loginfunction/check_login.php',
called from line 1, column 0 in <anonymous function>(event):
doLogin();

komischerweise habe ich den Code von nem Kollegen bekommen und das ganze läuft da perfekt...

grz

Dodo

Sieht stark nach Prototype aus
Tut mir Leid, da muss wohl jemand anderes ran - ich benutze für AJAX-Request die Funktionen, die von Standardisierungs-Gremien vorgeschlagen werden.
Ergo müsste ich mich erst in Prototype einarbeiten.

Schoggimaendli

Wie würde das ohne das Prototype-Framework realisierbar sein?

gruess

€:

Also das Problem liegt wohl nicht an Prototype.
Ich habe das ganze mal mit einem XmlHttpObject probiert -> gleicher Fehler.

Es liegt daran dass mein Javascript die Inputbox 'username' nicht findet.
Nur, wie kann das sein?
Meine LoginBox wird mittels <?php require_once eingebunden. Aber daran dürfte es wohl kaum liegen, oder?

grz

Pion

....lesen

oben

Code

var myhash = new Hash();
myhash.set(...);

unten dann

Code

parameters: myhash

Schoggimaendli

Auf was ist genau bezogen?
grz

Pion

Bitte was?

Du sollst das Manual lesen..

Zitat

The parameters for the request, which will be encoded into the URL for a 'get' method, or into the request body for the other methods. This can be provided either as a URL-encoded string or as any Hash-compatible object (basically anything), with properties representing parameters.

Schoggimaendli

Auf was dein Beitrag bezogen war.
Das mit dem Sckript ist mittlerweile geklärt, das Problem liegt eher an JavaScript selber.

Er kann 'username' was ein <div> in meinem Code ist, nich zu einem Objekt konvertieren.
Das brauch ich aber, da ich den Inhalt auslesen will.

HTML

<div id="loginbox">
            <form method="post" action="#" onsubmit="doLogin();">
                <table>
                    <tr>
                        <td>Username:</td>
                        <td><input name="lbuser" type="text" size="25" /></td>
                        <td rowspan="3"><img alt="Secure" src="images/login/login_icon.gif" height="70%" width="70%" /></td>
                    </tr>
                    <tr>
                        <td>Passwort:</td>
                        <td><input name="lbpwd" type="password" size="25" /></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="right"><input type="button" class="btn" value="Login!" onclick="doLogin();" /></td>
                        <td></td>
                    </tr>
                    <!--<tr id="LoginWrong"><td></td><td colspan="2" align="left"><font color="red">foo!</font></td></tr>-->
                </table>
            </form>
        </div>

Alles anzeigen

grz

Tobse

Nimm jQuery. Bzw. den inhalt eines divs leist du nicht über seine DOM-Referenz sondern über .innerHTML aus.
Mit jQuery sähe das dann so aus:

Code

$.ajax({
    url: "ajax/login.php",
    method: "POST",
    data: {
        user: document.forms[0].elements['lbuser'].value,
        pw: document.forms[0].elements['lbpwd'].value,
    },
    error: function() { alert("AJAX-Error"); },
    success: function(data) {
        if (data=="ok") {
             alert("Login Ok!");
        } else {
             // Server hat nicht "Ok" ausgegeben, login stimmt nicht
        }
    }
});
// Den inhalt eines Divs auslesen
var x=$("#div_id").html();

Alles anzeigen

Das führt dazu, dass eine Anfrage an ajax/login.php geht, der über POST die werte user und pw übergeben werden.
Die Funktion bei success hat als erstes argument die rückgabe des Servers.

EDIT:
du musst natürlich nicht jQuery nehmen, ich halts nur für simpler mit jQuery

jojo87

Zitat von Schoggimaendli

Auf was dein Beitrag bezogen war.
Das mit dem Sckript ist mittlerweile geklärt, das Problem liegt eher an JavaScript selber.

Er kann 'username' was ein <div> in meinem Code ist, nich zu einem Objekt konvertieren.
Das brauch ich aber, da ich den Inhalt auslesen will.

HTML

<div id="loginbox">
            <form method="post" action="#" onsubmit="doLogin();">
                <table>
                    <tr>
                        <td>Username:</td>
                        <td><input name="lbuser" type="text" size="25" /></td>
                        <td rowspan="3"><img alt="Secure" src="images/login/login_icon.gif" height="70%" width="70%" /></td>
                    </tr>
                    <tr>
                        <td>Passwort:</td>
                        <td><input name="lbpwd" type="password" size="25" /></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="right"><input type="button" class="btn" value="Login!" onclick="doLogin();" /></td>
                        <td></td>
                    </tr>
                    <!--<tr id="LoginWrong"><td></td><td colspan="2" align="left"><font color="red">foo!</font></td></tr>-->
                </table>
            </form>
        </div>

Alles anzeigen

grz

Ach kommt sschon Leute, jetzt wo er sein HTML, in dem der Fehler liegt, gezeigt hat, müsst ihr doch nicht mit jquery ankommen.
Das Problem liegt nicht an Javascript, sondern beim Programmierer

Mit

Code

$('username')

und

Code

$('password')

wird auf input felder mit den entsprechenden ID's zugegriffen. Diese gibt es aber nicht.
Vergib also die ID's richtig oder greife anders auf die inputfelder zu, siehe dazu die Doku von Prototype.

@Pion: An die url-parameter hatte ich auch erst gedacht, habe dnn aber das Manual gelesen. Und da steht, dass man sie auch in dieser Form übergeben kann

Schoggimaendli

oh mann.. Ich benutze tatsächlich 'name' anstatt 'id'.. wie peinlich (-;

Danke euch allen.

cheers

Tags