JSON
werkend voorbeeld
http://www.manutechnica.com/tutorials/ajax/phphulp/json/
Definitie en technische uitleg vind je overal wel online.
Wat ons interesseert: JSON is een notatie wijze van oa. javascript objecten en arrays.
Wat nog mooi is: php heeft functies om objecten om te zetten in strings die javascript kan begrijpen.
Waar kunnen we dat voor gebruiken?
Stel, je zit met een registratieformulier. Naast elk veld zet je een onzichtbare div met een boodschap. Die boodschap bevat telkens een waarschuwing over de inhoud van het veld.
Je zou dat volledige formulier kunnen controleren. Je geeft dan een array of object terug als http respons. Die kunnen dan rechtstreeks tonen welke velden al dan niet in orde zijn.
Een voorbeeld.
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<?php
$content = '';
switch($_GET['pagina'])
{
case 'geregistreerd':
$content = 'Je bent geregistreerd.';
break;
default:
$content ='<div id="loginDiv">
<div>
<h3>JSON voorbeeld</h3>
Jan, Freddy, Cindy, Frank en Bruno zijn al geregistreerd.</div>
<div>Op elk veld wordt gecontroleerd. Enkel wanneer alles in orde is, wordt je doorgestuurd.</div>
<h2>Registreer</h2>
<input type="text" id="naam" /> Login <br/>
<div class="verborgen" id="boodschap_naam">Kies een andere Login naam.</div>
<input type="password" id="paswoord" /> paswoord <br/>
<input type="password" id="paswoord2" /> herhaal paswoord <br/>
<div class="verborgen" id="boodschap_paswoord">De paswoorden moeten overeenkomen</div>
<input type="text" id="email" /> e-mail <br/>
<div class="verborgen" id="boodschap_email">Geen geldig e-mail adres.</div>
<input type="text" id="gsm" /> GSM <br/>
<div class="verborgen" id="boodschap_gsm">GSM invullen aub.</div>
...<br/>
<input type="button" value="log in" onClick="registreer();"/>
</div>';
break;
case 'registreer':
$respons = new ajaxRespons_registreer($_POST['naam'], $_POST['paswoord'], $_POST['paswoord2'], $_POST['email'], $_POST['gsm']);
echo json_encode($respons);
break;
}
if ($content != '')
{
echo '<html>
<head>
<script src="ajax.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
<style>
#menuDiv {border: 1px solid #333333; width: 250px; float: left; margin: 0 3px 0 0;}
#content{border: 1px solid #333333; width: 450px; float: left;}
.verborgen{display: none;color: #ff0000; font-size: 13px;}
</style>
</head>
<body>
'. $content .'
</body>
</html>
';
}
class ajaxRespons_registreer
{
public $naam;
public $paswoord;
public $email;
public $gsm;
public function __construct($naam, $paswoord, $paswoord2, $email, $gsm)
{
$this->naam = 0;
$this->paswoord = 0;
$this->email = 0;
$this->gsm = 0;
$namenInDB = array('Jan', 'Freddy', 'Cindy', 'Frank', 'Bruno');
if ($naam != '')
{
if ( in_array($naam, $namenInDB) )
$this->naam = 0;
else
$this->naam = 1;
}
if ($paswoord != '' && $paswoord2 != '')
{
$this->paswoord = ($paswoord == $paswoord2 ? 1 : 0 );
}
if ($email != '')
{
if ( count(explode("@", $email)) > 1 )
$this->email = 1;
}
if ($gsm != '')
{
$this->gsm = 1;
}
}
}
?>
$content = '';
switch($_GET['pagina'])
{
case 'geregistreerd':
$content = 'Je bent geregistreerd.';
break;
default:
$content ='<div id="loginDiv">
<div>
<h3>JSON voorbeeld</h3>
Jan, Freddy, Cindy, Frank en Bruno zijn al geregistreerd.</div>
<div>Op elk veld wordt gecontroleerd. Enkel wanneer alles in orde is, wordt je doorgestuurd.</div>
<h2>Registreer</h2>
<input type="text" id="naam" /> Login <br/>
<div class="verborgen" id="boodschap_naam">Kies een andere Login naam.</div>
<input type="password" id="paswoord" /> paswoord <br/>
<input type="password" id="paswoord2" /> herhaal paswoord <br/>
<div class="verborgen" id="boodschap_paswoord">De paswoorden moeten overeenkomen</div>
<input type="text" id="email" /> e-mail <br/>
<div class="verborgen" id="boodschap_email">Geen geldig e-mail adres.</div>
<input type="text" id="gsm" /> GSM <br/>
<div class="verborgen" id="boodschap_gsm">GSM invullen aub.</div>
...<br/>
<input type="button" value="log in" onClick="registreer();"/>
</div>';
break;
case 'registreer':
$respons = new ajaxRespons_registreer($_POST['naam'], $_POST['paswoord'], $_POST['paswoord2'], $_POST['email'], $_POST['gsm']);
echo json_encode($respons);
break;
}
if ($content != '')
{
echo '<html>
<head>
<script src="ajax.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
<style>
#menuDiv {border: 1px solid #333333; width: 250px; float: left; margin: 0 3px 0 0;}
#content{border: 1px solid #333333; width: 450px; float: left;}
.verborgen{display: none;color: #ff0000; font-size: 13px;}
</style>
</head>
<body>
'. $content .'
</body>
</html>
';
}
class ajaxRespons_registreer
{
public $naam;
public $paswoord;
public $email;
public $gsm;
public function __construct($naam, $paswoord, $paswoord2, $email, $gsm)
{
$this->naam = 0;
$this->paswoord = 0;
$this->email = 0;
$this->gsm = 0;
$namenInDB = array('Jan', 'Freddy', 'Cindy', 'Frank', 'Bruno');
if ($naam != '')
{
if ( in_array($naam, $namenInDB) )
$this->naam = 0;
else
$this->naam = 1;
}
if ($paswoord != '' && $paswoord2 != '')
{
$this->paswoord = ($paswoord == $paswoord2 ? 1 : 0 );
}
if ($email != '')
{
if ( count(explode("@", $email)) > 1 )
$this->email = 1;
}
if ($gsm != '')
{
$this->gsm = 1;
}
}
}
?>
js.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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
http = createHTTPHandler();
function registreer()
{
var naam = document.getElementById('naam').value;
var paswoord = document.getElementById('paswoord').value;
var paswoord2 = document.getElementById('paswoord2').value;
var email = document.getElementById('email').value;
var gsm = document.getElementById('gsm').value;
var passData = 'naam=' + escape(naam) +"&paswoord=" + escape(paswoord) +"&paswoord2=" + escape(paswoord2) +"&email=" + escape(email) +"&gsm=" + escape(gsm);
var url = "index.php?pagina=registreer";
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = handleHttpResponseRegistreer;
http.send( passData );
}
function handleHttpResponseRegistreer()
{
if(http.readyState < 4)
{
}
if(http.readyState == 4)
{
document.getElementById('boodschap_naam').style.display = 'none';
document.getElementById('boodschap_paswoord').style.display = 'none';
document.getElementById('boodschap_email').style.display = 'none';
document.getElementById('boodschap_gsm').style.display = 'none';
var resultaat = eval('(' + http.responseText + ')');
if (Number(resultaat.naam) == 0)
document.getElementById('boodschap_naam').style.display = 'block';
if (Number(resultaat.paswoord) == 0)
document.getElementById('boodschap_paswoord').style.display = 'block';
if (Number(resultaat.email) == 0)
document.getElementById('boodschap_email').style.display = 'block';
if (Number(resultaat.gsm) == 0)
document.getElementById('boodschap_gsm').style.display = 'block';
}
if ( (Number(resultaat.naam) == 1 ) && (Number(resultaat.paswoord) == 1 ) && (Number(resultaat.email) == 1 ) && (Number(resultaat.gsm) == 1 ) )
window.location = 'index.php?pagina=geregistreerd';
}
function registreer()
{
var naam = document.getElementById('naam').value;
var paswoord = document.getElementById('paswoord').value;
var paswoord2 = document.getElementById('paswoord2').value;
var email = document.getElementById('email').value;
var gsm = document.getElementById('gsm').value;
var passData = 'naam=' + escape(naam) +"&paswoord=" + escape(paswoord) +"&paswoord2=" + escape(paswoord2) +"&email=" + escape(email) +"&gsm=" + escape(gsm);
var url = "index.php?pagina=registreer";
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = handleHttpResponseRegistreer;
http.send( passData );
}
function handleHttpResponseRegistreer()
{
if(http.readyState < 4)
{
}
if(http.readyState == 4)
{
document.getElementById('boodschap_naam').style.display = 'none';
document.getElementById('boodschap_paswoord').style.display = 'none';
document.getElementById('boodschap_email').style.display = 'none';
document.getElementById('boodschap_gsm').style.display = 'none';
var resultaat = eval('(' + http.responseText + ')');
if (Number(resultaat.naam) == 0)
document.getElementById('boodschap_naam').style.display = 'block';
if (Number(resultaat.paswoord) == 0)
document.getElementById('boodschap_paswoord').style.display = 'block';
if (Number(resultaat.email) == 0)
document.getElementById('boodschap_email').style.display = 'block';
if (Number(resultaat.gsm) == 0)
document.getElementById('boodschap_gsm').style.display = 'block';
}
if ( (Number(resultaat.naam) == 1 ) && (Number(resultaat.paswoord) == 1 ) && (Number(resultaat.email) == 1 ) && (Number(resultaat.gsm) == 1 ) )
window.location = 'index.php?pagina=geregistreerd';
}
Wat merk je? Je moet http.responseText eerst door eval sturen.
« vorige pagina | volgende pagina »