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)
PHP script in nieuw venster Selecteer het PHP script
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
<?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;
    }
  }
}

?>


js.js
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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';
    
}



Wat merk je? Je moet http.responseText eerst door eval sturen.

« Lees de omschrijving en reacties

Inhoudsopgave

  1. Inleiding
  2. Het AJAX object aanmaken.
  3. Eerste voorbeelden
  4. Navigatie - bookmarken
  5. JSON
  6. XML
  7. UNICODE - Slot

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.