Problem mit Logindaten übergeben an PHP mit AJAX

[wucher wichtel]

Hi,
ich versuche mich gerade etwas in Ajax. Dabei wollte ich den Inhalt von zwei Feldern an den Webserver schicken. Und das ganze wollte ich in etwa so machen:

/*Zeile1*/ if (http != null) {
/*Zeile2*/  http.open("POST", "getpost.php", true);
/*Zeile3*/  http.setRequestHeader(
/*Zeile4*/        "Content-Type",
/*Zeile5*/        "application/x-www-form-urlencoded");
/*Zeile6*/  http.onreadystatechange = ausgeben;
/*Zeile7*/  http.send("name=" + lgname + "&passwort=" + lgpw);
/*Zeile8*/ }

Das klappt eigentlich auch alles ganz gut. Nur das Senden in Zeile 7 macht Probleme. Wie kann ich das Problem lösen? Wie muss ich die Daten an den Webserver schicken?
Ich habe ein PHP-Skript, das so aussieht:

<h1>GET</h1>
<?php
   echo nl2br(htmlspecialchars(print_r($_GET, true)));
?>
<h1>POST</h1>
<?php
   echo nl2br(htmlspecialchars(print_r($_POST, true)));
?>

Es gibt dann folgendes aus:
GET
Array
(
)
POST
Array
(
[name] => undefined
[passwort] => undefined
)
Wie kann ich mein Problem lösen? Vielen Dank für eure Hilfe. Ich hoffe ihr seid schon wach :)
bye, ww

[wucher wichtel]

Hallo!
Ich habe noch was vergessen! Am Anfang habe ich folgende Variablen stehen:

var lgname = document.getElementById("name").value;
var lgpw = document.getElementById("pw").value;

'tschuldigung!
bye, ww

[globe]

n'abend,

Das klappt eigentlich auch alles ganz gut. Nur das Senden in Zeile 7 macht Probleme. Wie kann ich das Problem lösen? Wie muss ich die Daten an den Webserver schicken?

wann genau macht das Senden denn Probleme? Wenn Benutzername und oder Passwort Sonderzeichen enthalten? immer? je nach Wetter? je nach Uhrzeit? nur beim Mittagessen?

In einem Artikel zu einem ähnlichen Thema zeigte Molily die Funktion urlencode() vielleicht möchtest du diese auf deine Daten anwenden, bevor du sie an den Server schickst?

weiterhin schönen abend...

[wucher wichtel]

Hallo!
Wie ich geschrieben habe gibt PHP an, dass name und passwort undefiniert sind. Deswegen gehe ich stark davon aus, dass der Fehler in dieser Zeile liegt (ich lasse mich aber auch gerne belehren):

/*Zeile7*/  http.send("name=" + lgname + "&passwort=" + lgpw);

Kann es vielleicht sein, dass das mit dem Verketten nicht richtig ist?

wann genau macht das Senden denn Probleme? Wenn Benutzername und oder Passwort Sonderzeichen enthalten? immer? je nach Wetter? je nach Uhrzeit? nur beim Mittagessen?

Immer.

Ich glaube nicht, dass ich diese Funktion brauche. Meine Frage war, wie ich den Formularinhalt an AJAX dranhängen kann, damit dieser von PHP weiterverarbeitet werden kann!?
bye, ww

[globe]

n'abend,

Wie ich geschrieben habe gibt PHP an, dass name und passwort undefiniert sind. Deswegen gehe ich stark davon aus, dass der Fehler in dieser Zeile liegt (ich lasse mich aber auch gerne belehren):

/*Zeile7*/  http.send("name=" + lgname + "&passwort=" + lgpw);

sofern deine Variablen lgname und lgpw richtig kodiert sind, sollte das kein Problem darstellen.

in meiner eigenen AJAX-Geschichte Übegebe ich (bei POST-Requests) noch die Länge der übermittelten Daten mit:

if (http != null) {  
  // schreiben wir unsere urlencoded-Daten mal in eine Variable  
  var data = "name=" + urlencode(lgname) + "&passwort=" + urlencode(lgpw);  
  http.open("POST", "getpost.php", true);  
  http.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );  
  // String.length gibt uns die Länge der Zeichenkette  
  http.setRequestHeader( 'Content-length', data.length );  
  // hier beachtest du hoffentlich, dass es mehrere readystates gibt,  
  // die jeweils unterschiedliche Bedeutungen haben...  
  http.onreadystatechange = ausgeben;  
  http.send(data);  
}

Ich bin mir nicht mehr sicher, meine aber mich daran zu erinnern, dass bei POST-Requests die Größe der Daten mitgegeben werden muss.

Ich glaube nicht, dass ich diese Funktion brauche. Meine Frage war, wie ich den Formularinhalt an AJAX dranhängen kann, damit dieser von PHP weiterverarbeitet werden kann!?

du gibst als Content-Type urlencoded an:

/*Zeile5*/        "application/x-www-form-urlencoded");

dementsprechend möchstest du deine Daten auch urlencoded abliefern. Was würde denn deiner Meinung nach passieren, wenn man ein & im Passwort hat?

Mit deinem Code

/*Zeile7*/  http.send("name=" + lgname + "&passwort=" + lgpw);

würde dann etwa folgendes passieren:
http.send("name=meinname&passwort=123&456");
Was fällt dir dabei auf?

weiterhin schönen abend...

[wucher wichtel]

Hallo!
Danke, dass du mir so ausführlich geantwortet hast! Ich habe viel probiert und irgendwie hat nichts so wirklich geklappt.

Mit deinem Code
/*Zeile7*/  http.send("name=" + lgname + "&passwort=" + lgpw);
würde dann etwa folgendes passieren:
http.send("name=meinname&passwort=123&456");
Was fällt dir dabei auf?

Ich kann auf das "&" im Passwort bzw. im Namen verzichten. Das ist nicht das Problem. Mir ist zwar bewusst, dass das mal Probleme machen kann, aber mir geht es vorallem darum zu lernen, wie ich Formulardaten an ein Ajaxscript anhängen kann. Und ich brauche dafür ein leichtes Beispiel.
Bis jetzt sah mein Code so aus:

  
<html>  
<head>  
 <title></title>  
 <link rel="STYLESHEET" type="text/css" href="css/css.css">  
<script type="text/javascript">
~~~~~~javascript
  
var http = null;  
var lgname = document.getElementById("name").value;  
var lgpw = document.getElementById("pw").value;  
function sendRequest(){  
 if (window.XMLHttpRequest) {  
  http = new XMLHttpRequest();  
 } else if (window.ActiveXObject) {  
  http = new ActiveXObject("Microsoft.XMLHTTP");  
 }  
 if (http != null) {  
  http.open("POST", "getpost.php", true);  
  http.setRequestHeader(  
        "Content-Type",  
        "application/x-www-form-urlencoded");  
  http.onreadystatechange = ausgeben;  
  http.send("name=" + lgname + "&passwort=" + lgpw);  
 }  
}  
function ausgeben() {  
 if (http.readyState == 4) {  
  document.getElementById("footer").innerHTML = http.responseText;  
 }  
}
~~~~~~html
  
</script>  
</head>  
  
<body>  
<div id="footer">  
 <label for="name">Loginname: </label><input type="text" name="name" class="login" size="15" id="name">  
 <label for="pw"> Passwort: </label><input type="text" name="pw" class="login" size="15" id="pw">  
 <input type="button" value="Absenden" class="login" onclick="sendRequest()">  
</div>  
</body>  
</html>  

Ich weiß, dass es wichtig ist, was du mir gerade erklärt hast. Aber ich bitte dich darum mir zu erklären warum das von mir geschriebene Script nicht funktioniert, weil es einfacher ist. Ich verstehe noch nicht sehr viel von AJAX und mir ist gerade wichtig, dass ich einfache Dinge zuerst verstehe. Dann kommen die schwierigen Sachen :-) Ich hoffe du verstehst es :)
Nochmals vielen Dank für deine Hilfe!
bye, ww

[svg4you]

Tach wucher wichtel,

Bis jetzt sah mein Code so aus:

...
<script type="text/javascript">

var http = null;  
  

> var lgname = document.getElementById("name").value;  
> var lgpw = document.getElementById("pw").value;  

^^^  
Du fragst die Inhalte der Inputfelder an dieser Stelle zu früh ab.  
  

> function sendRequest(){  
  
Setze beide Zeilen an diese Stelle.  
  

>  if (window.XMLHttpRequest) {...

~~~  
  
Man liest sich,  
svg4you

[globe]

n'abend,

»»» ~~~javascript

var http = null;
var lgname = document.getElementById("name").value;
var lgpw = document.getElementById("pw").value;
function sendRequest(){
if (window.XMLHttpRequest) {
  http = new XMLHttpRequest();
// ...

  
na da haben wir doch deinen Fehler.  
Zu dem Zeitpunkt, zu dem du name und pw abfrägst, existieren diese noch gar nicht im DOM. Entweder du setzt die beiden Zeilen in die Funktion sendRequest(), oder du holst sie dir im onload handler. (ersteres wird für dich einwandfrei funktionieren)  
  
  
  

> Ich weiß, dass es wichtig ist, was du mir gerade erklärt hast. Aber ich bitte dich darum mir zu erklären warum das von mir geschriebene Script nicht funktioniert, weil es einfacher ist.  
  
Dein Fehler lag nicht beim AJAX, sondern im Abrufen der Formularelemente.  
Was ich dir über urlencode() erzählt habe ist dennoch wichtig! Es ist kein Aufwand die Funktion von der verlinkten Seite zu kopieren und in deinen Code einzufügen.  
  

> Ich verstehe noch nicht sehr viel von AJAX und mir ist gerade wichtig, dass ich einfache Dinge zuerst verstehe.  
  
Deine Probleme liegen bei Javascript (und hier vielleicht noch beim DOM). AJAX ist nur ein tolles Marketingwort und bedeutet auf Deutsch nicht viel mehr als "holen wir uns doch mittels Javascript einen (String irgendeines Typs vom Server) runter."  
  

> Dann kommen die schwierigen Sachen :-) Ich hoffe du verstehst es :)  
  
Bevor wir zu den schwierigen Sachen kommen, möchte ich dir noch einen Tipp mit auf den Weg geben:  
  

> ~~~html

<div id="footer">  

>  <label for="name">Loginname: </label><input type="text" name="name" class="login" size="15" id="name">  
>  <label for="pw"> Passwort: </label><input type="text" name="pw" class="login" size="15" id="pw">  
>  <input type="button" value="Absenden" class="login" onclick="sendRequest()">  
> </div>

ist nicht gerade tolles HTML.
Dadurch, dass du kein Formular benutzt, kann man nach eingabe des Passworts im Passwortfeld nicht einfach [Enter] drücken; man _muss_ auf den [Absenden]-Button klicken.

Etwas schöner wäre vielleicht

<form name="login" action="login.php" method="post" onsubmit="sendRequest(); return false;">  
  <label for="name">Loginname: </label><input type="text" name="name" class="login" size="15" id="name">  
  <label for="pw"> Passwort: </label><input type="text" name="pw" class="login" size="15" id="pw">  
  <input type="submit" value="Absenden" class="login">  
</form>

Dein AJAX-gedöns wird nun über den onsubmit-handler aufgerufen und das Absenden des Formulars durch das return false; unterbunden. Auf diese Weise kannst du das Formular ganz normal abschicken, wenn du Javascript nicht aktiviert hast. (Das Formular kannst du natürlich wieder in dein footer-div packen...)

weiterhin schönen abend...

[wucher wichtel]

Wow!
Danke schön für eure Hilfe! Und es war wirklich nicht schwer die Funktion einzufügen! Ich verstehe zwar nicht was die Funktion macht, aber das ist jetzt noch nicht so wichtig :-)
Danke schön!
bye, ww

[wahsaga]

hi,

AJAX ist nur ein tolles Marketingwort und bedeutet auf Deutsch nicht viel mehr als "holen wir uns doch mittels Javascript einen (String irgendeines Typs vom Server) runter."

Na bei der Ausdrucksweise würde ich doch vorschlagen, wir bleiben trotzdem lieber bei der Bezeichnung AJAX.

gruß,
wahsaga

[globe]

n'abend,

Na bei der Ausdrucksweise würde ich doch vorschlagen, wir bleiben trotzdem lieber bei der Bezeichnung AJAX.

Spielverderber :P

weiterhin schönen abend...

[dedlfix]

echo $begrüßung;

var lgname = document.getElementById("name").value;
var lgpw = document.getElementById("pw").value;
/*Zeile7*/  http.send("name=" + lgname + "&passwort=" + lgpw);

POST
[name] => undefined
[passwort] => undefined

Die AJAX-Übertragung funktioniert soweit. Was nicht funktioniert ist der Zugriff auf document.getElementById("name") und document.getElementById("pw"), weswegen du den String "undefined" geliefert bekommst, den du dann in lgname und lgpw ablegst und verAJAXt.
Um zu ermitteln, warum der Zugriff nicht funktioniert, kann dir die Javascript-Konsole helfen.

echo "$verabschiedung $name";