Antworten zum Thema „Ajaxloginscript funktioniert nicht, weis nicht weiter“

Mo1k · 27.03.2012

Hallo,

ich habe bereist in einem anderen Forum mein Problem geschildert, jedoch konnte mir bis jetzt noch keiner richtig sagen wieso, hoffentlich weis in diesem Forum wieso, denn ich weis einfach nicht weiter

zunächsteinmal die 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" method="post">
            User/email:<br>
            <input type="text" name="user"><br>Password:<br>
            <input type="password" 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");
      }
    }
  }
    if ( resObjekt===null ) {
    alert("Erzeugung des XMLHttpRequest-Objekts ist nicht möglich");
  return resObjekt;
}
}

function sndReq() {
      var userInput = document.forms["login"].elements["user"];
  var pwInput = document.forms["login"].elements["passwort"];

  if ( userInput.value!="" && pwInput.value!="" ){
    var postParam = 'data1=' + encodeURIComponent(userInput.value) + '&data2=' + encodeURIComponent(pwInput.value) ;
    var resObjekt = erzXMLHttpRequestObject();
    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 && xmlhttp.status === 200){
    document.getElementById("box1").innerHTML = resObjekt.responseText;
  } 
}

login.php

Code:

    require_once('db_connect.php');
 
    require_once('server_config.php');

    if(!isset($_POST['data1']) || empty($_POST['data1']) || !isset($_POST['data2']) || empty($_POST['data2']))
    {
        echo "
            Login fehlgeschlagen!
            ";
        exit();
    }
    $_POST['data1'] = trim($_POST['data1']);
    $_POST['data1'] = strtolower($_POST['data1']);
    
    $salt = "hasf545!54635ssjhfv89sd4";
    $pw = trim($_POST['data2']);
    $pw = hash('sha256', $pw.$salt);
    
    $sql  = 'SELECT `user_id`, `password` FROM `user` WHERE `user` = ?';
        $stmt = $db->prepare($sql);
        $stmt->bind_param('s', $_POST['data1']);
        $stmt->execute();
        $stmt->bind_result($acc_id, $acc_pw);
        if($stmt->fetch()) {
            $stmt->close();   
                    if($acc_pw === $pw) {
                        session_regenerate_id(TRUE);
                        $_SESSION=array();
                        $_SESSION['acc_id'] = $acc_id;
                        $_SESSION['login'] = true;
                        echo "
                            success
                            ";
                        exit();
                    }
                    else {
                                echo "
            Login fehlgeschlagen!
            ";
                        exit();
                    }
        }
        else {
            $stmt->close();
                    echo "
            Login fehlgeschlagen!
            ";
            exit();
        }

Es gibt mehrere Fehler:

1.
Wenn ich versuche ein leeres Formular abzuschicken kommt für ca. 1 sek die Fehlermeldung in der divbox box1 und verschwindet dann wieder, wieso ?

2.
Wenn ich ein richtig ausgefülltes Formular abschicke kommt keine Antwort, garkeine , keine Fehlermeldung ( Login fehlgeschlagen! ) oder Erfolgsmeldung ( success ). Allerdings wird login.php von der Ajaxfunktion aufgerufen, da eine session erstellt wurde. login.php habe ich schon ohne ajax getestet und sie hat einwandfrei funktioniert! Ich verschicke die Daten mit Ajax per POST, eventuell habe ich da einen Fehler gemacht ?

Mo1k

kyle66 · 28.03.2012

AW: Ajaxloginscript funktioniert nicht, weis nicht weiter

Hallo,

zu 1.
Das kommt daher weil das Formular abgeschickt wird, nach der Javascript-Verarbeitung.

Du kannst in deinem onclick "sndReq(); return false;" schreiben, damit das Formular nicht abgeschickt wird. Oder alternativ "return sndReq();" und in der sndReq-Funktion dann false zurückgeben.

kyle66 · 28.03.2012

AW: Ajaxloginscript funktioniert nicht, weis nicht weiter

zu 2.
resObjekt ist sowohl in sndReq als auch in handleResponse nicht bekannt, da es aus der Funktion erzXMLHttpRequestObject nicht zurückgegeben wird (zumindest nicht im Erfolgsfall). Du musst es immer zurückgeben und auch an die handleResponse als Parameter übergeben. Außerdem gibt es die Variable xmlhttp nicht. Also in etwa so

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");
			}
		}
	}
	if ( resObjekt===null ) {
		alert("Erzeugung des XMLHttpRequest-Objekts ist nicht möglich");
	}
	return resObjekt;
}

function sndReq() {
	var userInput = document.forms["login"].elements["user"];
	var pwInput = document.forms["login"].elements["passwort"];
	
	if ( userInput.value!="" && pwInput.value!="" ){
		var postParam = 'data1=' + encodeURIComponent(userInput.value) + '&data2=' + encodeURIComponent(pwInput.value) ;
		var resObjekt = erzXMLHttpRequestObject();
		resObjekt.open('POST', 'login.php' ,true);
		resObjekt.onreadystatechange = handleResponse(resObjekt);
		resObjekt.send(postParam);
	}
	else {
		document.getElementById("box1").innerHTML = "Formular nicht komplett ausgefüllt!";
	}
	return false;
}
function handleResponse(resObjekt) {
	if(resObjekt.readyState == 4 && resObjekt.status === 200){
		document.getElementById("box1").innerHTML = resObjekt.responseText;
	} 
}