Ajax Loginsystem, Anfänger braucht Hilfe

M

Mo1k

Mitglied
Hallo,

ich habe ein Loginsystem ohne Ajax programmiert und möchte dieses nun mit hilfe von Ajax verbessern.

zunächst einmal meine index.php
Code: 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <style type="text/css">
            #login { position:relative; width:150px; height:150px; z-index:1; background-color:#ddf; margin-left: auto; margin-right: auto; border:1px solid #888; align:top}
            #box1 { position:absolute; top:5px; right:150px; width:200px; height:100px; z-index:2; background-color:#ddf; border:1px solid #888; align:top}
        </style>
        <script language="JavaScript" src="login/login_ajax.js"></script>
    </head>
    <body>
        <div align="center" id="login">
        <div id="box1">
            
        </div>
        <form name="login">
            User/email:<br>
            <input class="input1" type="text" name="user"><br>Password:<br>
            <input type="password" class="input1" name="passwort"><br>
            <input type="submit" value="login" alt="Login" onclick="sndReq()" style="width:150px">
        </form>
            <a href="">Passwort vergessen ?</a>
    </div>
    </body>
</html>

login_ajax.js
Code: 
function erzXMLHttpRequestObject(){
  var resObjekt = null;
  try {
    resObjekt = new XMLHttpRequest();
  }
  catch(Error){
    try {
      resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
    }
    catch(Error){
      try {
      resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(Error){
        alert(
          "Erzeugung des XMLHttpRequest-Objekts ist nicht möglich");
      }
    }
  }
  return resObjekt;
}
function ErzeugeAJAXObjekt(){
  this.erzXMLHttpRequestObject = erzXMLHttpRequestObject;
}

o = new ErzeugeAJAXObjekt();
resObjekt = o.erzXMLHttpRequestObject();

function sndReq() {
  if(document.login.user.value !="" || document.login.passwort.value !=""){
        content = document.getElementById(user).value;
        content2 = document.getElementById(passwort).value;
        postParam = 'data1=' + encodeURIComponent(content) + '&data2=' + encodeURIComponent(content2) ;
    resObjekt.open('post', 'login.php' ,true);
    resObjekt.onreadystatechange = handleResponse;
    resObjekt.send(postParam);
  }
  else {
    document.getElementById("box1").innerHTML = "Formular nicht komplett ausgefüllt!";
  }
}
function handleResponse() {
  if(resObjekt.readyState == 4){
    document.getElementById("box1").innerHTML = resObjekt.responseText;
  } 
}

Ich möchte die Daten per POST und nicht per GET übertragen, da ich die übermittelten Daten nicht in der URL stehen haben will.

Zunächsteinmal passiert folgendes:
Wenn ich ein leeres Formular abschicke steht für ca 1 sek indem Div box1 : Formular nicht komplett ausgefüllt! und verschwindet dann gleich wieder wieso ?

Und die Websiteadresse verändert sich zu : index.php?user=&passwort=

Wenn ich ein richtig ausgefülltes Formular abschicke sieht die URL so aus:
index.php?user=mo1k&passwort=test

(edit: die übergabe stand in der url weil ich im form tag method="post" vergessen hatte, es funktioniert aber trozdem noch nicht )

und in dem Div box1 steht nichts ( wenn der login erfolgreich war gebe ich folgendes aus:
echo "success "; )

an der login.php kann es nicht liegen, da ich diese bereist ohne ajax getestet habe und sie hat einwandfrei funktioniert.

Die Funktion zur Erzeugung des resObjekt habe ich aus einem Tutorial, diese Funktion verstehe ich auch , ich weis nur nicht wozu am schluss noch folgende Zeilen stehen:
Code: 
function ErzeugeAJAXObjekt(){
  this.erzXMLHttpRequestObject = erzXMLHttpRequestObject;
}

o = new ErzeugeAJAXObjekt();
resObjekt = o.erzXMLHttpRequestObject();

Ich hätte diese Zeilen weggelassen und in der Funktion sndReq() noch folgende Zeile hinzugefügt:
Code: 
resObjekt = erzXMLHttpRequestObject();

Ich hoffe mir kann jemand helfen.
Mo1k
 
Zuletzt bearbeitet:
Im Skript sind so einige logische Fehler drin.
Ich habe den Code mal etwas aufgeräumt:
Javascript: 
function erzXMLHttpRequestObject(){
  var resObjekt = null;
  try {
    resObjekt = new XMLHttpRequest();
  }
  catch(Error){
    try {
      resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
    }
    catch(Error){
      try {
      resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(Error){
        alert(
          "Erzeugung des XMLHttpRequest-Objekts ist nicht möglich");
      }
    }
  }
  // Noch eine Prüfung - sicher ist sicher ;)
  if ( resObjekt===null )
    alert("Erzeugung des XMLHttpRequest-Objekts ist nicht möglich");
  return resObjekt;
}

 
function sndReq()
{
  // Du hattest zum Teil getElementById(user), wobei user nirgends definiert war
  // So ist es einfacher:
  var userInput = document.forms["login"].elements["user"];
  var pwInput = document.forms["login"].elements["passwort"];

  // && statt || (oder muss nur ein Feld ausgefüllt sein?)
  if ( userInput.value!="" && pwInput.value!="" )
  {
    var content = userInput.value;
    var content2 = pwInput.value;
    var postParam = 'data1=' + encodeURIComponent(content) + '&data2=' + encodeURIComponent(content2) ;

    // ErzeugeAJAXObjekt() brauchen wir nicht - einfach direkt folgende Funktion aufrufen:
    var resObjekt = erzXMLHttpRequestObject();
    resObjekt.open('POST', 'login.php' ,true);
    // Du hattest die Funktion "ausgelagert", man kann aber auch eine anonyme Fkt. übergeben:
    resObjekt.onreadystatechange = function()
    {
       // Hier prüfe ich auch noch, ob der HTTP Status Code 200 ("Alles okay") ist
       if ( resObjekt.readyState==4 && resObjekt.status==200 )
       {
         document.getElementById("box1").innerHTML = resObjekt.responseText;
       }
    }
    resObjekt.send(postParam);
  }
  else
  {
    document.getElementById("box1").innerHTML = "Formular nicht komplett ausgefüllt!";
  }
}
 
Hallo,

danke für das korrigieren, leider klappt das ganze noch nicht. Zunächsteinmal wenn ich ein leeres Formular abschicke, steht für ca. 1 Sekunde die Fehlernachricht in der div box, aber verschwindet dann wieder, wieso ? Ich hätte gerne dass die Nachricht im div stehen bleibt.
Ich habe nun festgestellt, dass beim absenden des formulars die seite login.php aufgerufen wird ( es wird eine Session gestartet ) aber komischerweise wird nichts in die session geschrieben ( habe zum testen mal ganz am anfang in der login.php eine sessionvariable erstellt und was reingeschrieben, jedoch wird der Befehl nicht ausgeführt, wenn ich das script ohne ajax aufrufe wird die sessionvariable erstellt ! )
 
Erst einmal würde ich ein paar log()s einbauen:
Javascript: 
function log(msg)
{
  console.log(msg);
}

function sndReq()
{
  log("sndReq() started");

  // Du hattest zum Teil getElementById(user), wobei user nirgends definiert war
  // So ist es einfacher:
  var userInput = document.forms["login"].elements["user"];
  var pwInput = document.forms["login"].elements["passwort"];
 
  // && statt || (oder muss nur ein Feld ausgefüllt sein?)
  if ( userInput.value!="" && pwInput.value!="" )
  {
    log("Input elements 'user' and 'passwort' are filled");

    var content = userInput.value;
    var content2 = pwInput.value;
    var postParam = 'data1=' + encodeURIComponent(content) + '&data2=' + encodeURIComponent(content2) ;
 
    // ErzeugeAJAXObjekt() brauchen wir nicht - einfach direkt folgende Funktion aufrufen:
    var resObjekt = erzXMLHttpRequestObject();
    resObjekt.open('POST', 'login.php' ,true);
    // Du hattest die Funktion "ausgelagert", man kann aber auch eine anonyme Fkt. übergeben:
    resObjekt.onreadystatechange = function()
    {
       log("Ready state changed to: "+resObjekt.readyState);
       // Hier prüfe ich auch noch, ob der HTTP Status Code 200 ("Alles okay") ist
       if ( resObjekt.readyState==4 )
       {
         log("Ready state '4' reached");
         if ( resObjekt.status==200 )
         {
           log("And status is 200, all right!");
           document.getElementById("box1").innerHTML = resObjekt.responseText;
         }
         else
         {
           log("Status is not 200!");
         }
       }
    }
    resObjekt.send(postParam);
    log("AJAX request sent");
  }
  else
  {
    log("Input elements are not completely filled!");
    document.getElementById("box1").innerHTML = "Formular nicht komplett ausgefüllt!";
  }
}
Jetzt kannst du in der Fehlerkonsole deines Browsers die Logs einsehen und hier posten.
 
Ich habe deinen Code ausprobiert, habe dann versucht mich einzuloggen, aber es ging nicht. Habe dann in der Fehlerconsole nachgeschaut und es war kein Eintrag vorhanden ! Allerdings bekomme ich nun wenn ich falsche Daten eingebe die Die Fehlermeldung dass Die Variablen nicht gesetzt oder leer sind

ich prüfe das mit folgendem Code in der login.php
Code: 
    if(!isset($_POST['data1']) || empty($_POST['data1']) || !isset($_POST['data2']) || empty($_POST['data2']))
    {
        echo "
            Daten leer!
            ";
        exit();
    }
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück