JavaScript gedeelte

We gaan eerst het JavaScript/AJAX gedeelte programmeren. Dit is alles wat de gebruiker kan zien. Eerst kijken we of de string langer is dan 0 karakters. Als dat zo is gaan we een aanvraag doen op het PHP-script. Het PHP-script maken we op de volgende pagina.

Zet deze code in de <head></head> tags van je pagina.

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
<script type="text/javascript">
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code voor IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>


Dit is het grafische gedeelte van de pagina. Ik denk dat je hiervoor niet zoveel uitleg nodig hebt, want ik denk dat je al aardig wat van HTML kan.
Deze code zet je in de <body></body> tags van je pagina.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<p><b>Begin met het typen van de naam:</b></p>
<form>
Voornaam: <input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
<p>Suggesties: <span id="txtHint"></span></p>


Ga snel door naar de volgende pagina voor het PHP-script.

« Lees de omschrijving en reacties

Inhoudsopgave

  1. Inleiding
  2. JavaScript gedeelte
  3. PHP: gethint.php
  4. PHP + MySQL: gethint.php
  5. Afsluiting

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.