Inlogformulier checken met AJAX
Mijn hele formulierverwerking staat op de pagina zelf, en wordt nu met POST opgevraagd. Zodra er een fout is opgetreden wordt er een foutmelding bovenaan de pagina weergegeven met JavaScript, maar deze wordt nu dus pas weergegeven nadat het formulier gepost is (en de pagina feitelijk ververst).
Het gaat mij er dus alleen om dat de pagina niet hoeft te verversen, maar dit met AJAX gebeurt. Kan iemand mij uitleggen hoe ik dit kan doen?
Toevoeging op 22/09/2012 01:05:17:
Ter informatie, mijn inlogformulier bestaat uit een input voor het e-mailadres en het wachtwoord, dat is het.
http://woork.blogspot.nl/2007/10/login-using-ajax-and-php.html
Het bestand ajax.js:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function createObject(){
var request_type;
var browser=navigator.appName;
if(browser=="Microsoft Internet Explorer"){
request_type=new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type=new XMLHttpRequest();
}
return request_type;
}
var http=createObject();
var nocache=0;
function inloggen(){
document.getElementById("status").innerHTML="Laden..."
var emailadres=encodeURI(document.getElementById("nn_emailadres").value);
var wachtwoord=encodeURI(document.getElementById("nn_wachtwoord").value);
nocache=Math.random();
http.open("get","index.php?emailadres="+emailadres+"&wachtwoord="+wachtwoord+"&nocache="+nocache);
http.onreadystatechange=status;
http.send(null);
}
function status(){
if(http.readyState==4){
var response=http.responseText;
if(response==0){
document.getElementById("status").innerHTML="Nee";
}else{
document.body.innerHTML=response;
}}}
var request_type;
var browser=navigator.appName;
if(browser=="Microsoft Internet Explorer"){
request_type=new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type=new XMLHttpRequest();
}
return request_type;
}
var http=createObject();
var nocache=0;
function inloggen(){
document.getElementById("status").innerHTML="Laden..."
var emailadres=encodeURI(document.getElementById("nn_emailadres").value);
var wachtwoord=encodeURI(document.getElementById("nn_wachtwoord").value);
nocache=Math.random();
http.open("get","index.php?emailadres="+emailadres+"&wachtwoord="+wachtwoord+"&nocache="+nocache);
http.onreadystatechange=status;
http.send(null);
}
function status(){
if(http.readyState==4){
var response=http.responseText;
if(response==0){
document.getElementById("status").innerHTML="Nee";
}else{
document.body.innerHTML=response;
}}}
De HTML in index.php:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<form action="javascript:inloggen()" method="POST">
<label for="nn_emailadres"></label><input type="text" id="nn_emailadres" name="nn_emailadres" value="<?php if(isset($_SESSION["E-mailadres"])){echo $_SESSION["E-mailadres"];}else{echo "E-mailadres";} ?>" onfocus="if(this.value=='E-mailadres')this.value='';" onblur="if(this.value=='')this.value='E-mailadres';">
<input type="text" id="nn_wachtwoord2" value="Wachtwoord">
<label for="nn_wachtwoord"></label><input type="password" id="nn_wachtwoord" name="nn_wachtwoord">
<input type="hidden" id="veiligheid" name="veiligheid">
<input type="submit" id="inloggen" name="inloggen" value="Doorgaan">
</form>
<div id="status"></div>
<label for="nn_emailadres"></label><input type="text" id="nn_emailadres" name="nn_emailadres" value="<?php if(isset($_SESSION["E-mailadres"])){echo $_SESSION["E-mailadres"];}else{echo "E-mailadres";} ?>" onfocus="if(this.value=='E-mailadres')this.value='';" onblur="if(this.value=='')this.value='E-mailadres';">
<input type="text" id="nn_wachtwoord2" value="Wachtwoord">
<label for="nn_wachtwoord"></label><input type="password" id="nn_wachtwoord" name="nn_wachtwoord">
<input type="hidden" id="veiligheid" name="veiligheid">
<input type="submit" id="inloggen" name="inloggen" value="Doorgaan">
</form>
<div id="status"></div>
En de verwerking in de index.php:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?php
$gebruiker=false;
$fgeb1=array();
if(!$gebruiker){
if(database()){
if(isset($_GET["emailadres"])){
if(isset($_GET["wachtwoord"])){
$qgeb1=mysql_query("SELECT *** FROM *** WHERE Emailadres='".mysql_real_escape_string($_GET["emailadres"])."' LIMIT 1");
if($qgeb1){
if(mysql_num_rows($qgeb1)==1){
$rgeb1=mysql_fetch_assoc($qgeb1);
if(ctype_digit($rgeb1["PID"])){
if($rgeb1["Wachtwoord"]==sha1($_GET["wachtwoord"])){
$ageb1=array("1","11","1001","1011","1101","1111","10001","10011","10101");
if(in_array($rgeb1["Status"],$ageb1)){
$vc=nieuweveiligheidscode($rgeb1["Veiligheidscode"]);
$qgeb2=mysql_query("UPDATE *** SET Veiligheidscode='".mysql_real_escape_string($vc)."' WHERE PID='".mysql_real_escape_string($rgeb1["PID"])."' LIMIT 1");
if($qgeb2){
$_SESSION["Gebruiker"]=htmlspecialchars($vc);
if(isset($_SESSION["Gebruiker"])){
$_SESSION["Ingelogd"]=true;
if($_SESSION["Ingelogd"]==true){
$gebruiker=true;
}else{
$fgeb1[]="1";
}
}else{
$fgeb1[]="2";
}
}else{
$fgeb1[]="3";
}
}else{
$fgeb1[]="4";
}
}else{
$fgeb1[]="5";
}
}else{
$fgeb1[]="6";
}
}else{
$fgeb1[]="7";
}
}else{
$fgeb1[]="8";
}
}else{
$fgeb1[]="9";
}
}else{
$fgeb1[]="10";
}
}else{
$fgeb1[]="11";
}
}else{
$fgeb1[]="12";
}
?>
$gebruiker=false;
$fgeb1=array();
if(!$gebruiker){
if(database()){
if(isset($_GET["emailadres"])){
if(isset($_GET["wachtwoord"])){
$qgeb1=mysql_query("SELECT *** FROM *** WHERE Emailadres='".mysql_real_escape_string($_GET["emailadres"])."' LIMIT 1");
if($qgeb1){
if(mysql_num_rows($qgeb1)==1){
$rgeb1=mysql_fetch_assoc($qgeb1);
if(ctype_digit($rgeb1["PID"])){
if($rgeb1["Wachtwoord"]==sha1($_GET["wachtwoord"])){
$ageb1=array("1","11","1001","1011","1101","1111","10001","10011","10101");
if(in_array($rgeb1["Status"],$ageb1)){
$vc=nieuweveiligheidscode($rgeb1["Veiligheidscode"]);
$qgeb2=mysql_query("UPDATE *** SET Veiligheidscode='".mysql_real_escape_string($vc)."' WHERE PID='".mysql_real_escape_string($rgeb1["PID"])."' LIMIT 1");
if($qgeb2){
$_SESSION["Gebruiker"]=htmlspecialchars($vc);
if(isset($_SESSION["Gebruiker"])){
$_SESSION["Ingelogd"]=true;
if($_SESSION["Ingelogd"]==true){
$gebruiker=true;
}else{
$fgeb1[]="1";
}
}else{
$fgeb1[]="2";
}
}else{
$fgeb1[]="3";
}
}else{
$fgeb1[]="4";
}
}else{
$fgeb1[]="5";
}
}else{
$fgeb1[]="6";
}
}else{
$fgeb1[]="7";
}
}else{
$fgeb1[]="8";
}
}else{
$fgeb1[]="9";
}
}else{
$fgeb1[]="10";
}
}else{
$fgeb1[]="11";
}
}else{
$fgeb1[]="12";
}
?>
Ik kom er niet uit...
Toevoeging op 22/09/2012 20:17:47:
Even voor de duidelijkheid, zodra er een fout optreedt (die met de $fgeb1 wordt aangegeven), moet er met JavaScript een foutmelding bovenaan de pagina worden weergegeven.
Deze doet het nu al, maar ik heb ook geen idee hoe ik dit dan kan combineren met AJAX.
Code (php)
1
$(document).ready(function(){$("#DocumentationWarning").delay(400).slideDown(100).delay(5000).slideUp(100);});
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="DocumentationWarning">
<?php
if($fm==1){
foreach($fgeb1 as$f){
$qfou1=mysql_query("SELECT *** FROM *** WHERE Code='".mysql_real_escape_string($f)."' LIMIT 1");
if($qfou1){
if(mysql_num_rows($qfou1)==1){
$rfou1=mysql_fetch_assoc($qfou1);
if(ctype_digit($rfou1["Code"])){
if($rfou1["Status"]=="1"){
echo $rfou1["Informatie"];
}else{
echo "Foutmelding: ".$f;
}
}else{
echo "Foutmelding: ".$f;
}
}else{
echo "Foutmelding: ".$f;
}
}else{
echo "Foutmelding: ".$f;
}
}
}else{
foreach($fgeb1 as$f){
echo "Foutmeldingen: ".$f;
}
}
?>
</div>
<?php
if($fm==1){
foreach($fgeb1 as$f){
$qfou1=mysql_query("SELECT *** FROM *** WHERE Code='".mysql_real_escape_string($f)."' LIMIT 1");
if($qfou1){
if(mysql_num_rows($qfou1)==1){
$rfou1=mysql_fetch_assoc($qfou1);
if(ctype_digit($rfou1["Code"])){
if($rfou1["Status"]=="1"){
echo $rfou1["Informatie"];
}else{
echo "Foutmelding: ".$f;
}
}else{
echo "Foutmelding: ".$f;
}
}else{
echo "Foutmelding: ".$f;
}
}else{
echo "Foutmelding: ".$f;
}
}
}else{
foreach($fgeb1 as$f){
echo "Foutmeldingen: ".$f;
}
}
?>
</div>
Jaron T op 30/09/2012 20:50:14:
Waarom gebruik je het jQuery framework wel voor de delay maar niet voor het ajax request? ...
Ongeveer op deze manier.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form action="" method="post" id="my_form">
...
</form>
<script>
$(document).ready(function($) {
// elementen cachen
var my_form = $("#my_form");
var status = $("#status");
var nn_emailadres = $("#nn_emailadres");
var nn_wachtwoord = $("#nn_wachtwoord");
$("#my_form").submit(function(e) {
e.preventDefault();
// ajax request beginnen
var emailadres = encodeURI(nn_emailadres.val());
var wachtwoord = encodeURI(nn_wachtwoord.val());
$.ajax({
url: "index.php?emailadres=" + emailadres + "&wachtwoord=" + wachtwoord,
success: function(responseText) {
status.html(responseText);
}
});
});
});
</script>
...
</form>
<script>
$(document).ready(function($) {
// elementen cachen
var my_form = $("#my_form");
var status = $("#status");
var nn_emailadres = $("#nn_emailadres");
var nn_wachtwoord = $("#nn_wachtwoord");
$("#my_form").submit(function(e) {
e.preventDefault();
// ajax request beginnen
var emailadres = encodeURI(nn_emailadres.val());
var wachtwoord = encodeURI(nn_wachtwoord.val());
$.ajax({
url: "index.php?emailadres=" + emailadres + "&wachtwoord=" + wachtwoord,
success: function(responseText) {
status.html(responseText);
}
});
});
});
</script>
oftwel;
$.post("je_url.php", $("#je_form_id).serialize(), function(data){
// doe iets met data (is de output van je ajax request, async)
}):
Je kan dit inderdaad beter met POST doen dan met GET.
Maar dan zal je dit ook moeten aanpassen in je php-gedeelte; vergeet dat niet.
Gewijzigd op 01/10/2012 11:20:06 door Kris Peeters
Hoe kan ik zorgen dat ik al die else's niet nodig heb voor mijn foutmeldingen? Ik ben erg benieuwd naar hoe jij dat doet.
Voor de rest, bedankt voor jullie tips.
functies is het antwoord tegen diepe if/else lussen:
Code (php)
Gewijzigd op 19/12/2012 00:31:41 door Frank Nietbelangrijk
Mario Geheim op 18/12/2012 23:45:25:
... Hoe kan ik zorgen dat ik al die else's niet nodig heb voor mijn foutmeldingen? ...
Wel, die hierarchie is wel wat overdreven.
Elke else doet het zelfde; als je echt wil, kan je dingen samen nemen.
Een voorbeeld; een beetje overdreven. We proppen alles in de if() conditie.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
if($fm==1) {
foreach($fgeb1 as$f) {
$qfou1=mysql_query("SELECT *** FROM *** WHERE Code='".mysql_real_escape_string($f)."' LIMIT 1");
if($qfou1 && mysql_num_rows($qfou1) && $rfou1=mysql_fetch_assoc($qfou1) && ctype_digit($rfou1["Code"]) && $rfou1["Status"]=="1") {
echo $rfou1["Informatie"];
}
else {
echo "Foutmelding: ".$f;
}
}
}
else {
foreach($fgeb1 as$f) {
echo "Foutmeldingen: ".$f;
}
}
?>
if($fm==1) {
foreach($fgeb1 as$f) {
$qfou1=mysql_query("SELECT *** FROM *** WHERE Code='".mysql_real_escape_string($f)."' LIMIT 1");
if($qfou1 && mysql_num_rows($qfou1) && $rfou1=mysql_fetch_assoc($qfou1) && ctype_digit($rfou1["Code"]) && $rfou1["Status"]=="1") {
echo $rfou1["Informatie"];
}
else {
echo "Foutmelding: ".$f;
}
}
}
else {
foreach($fgeb1 as$f) {
echo "Foutmeldingen: ".$f;
}
}
?>