AJAX callbacks maken met jQuery

Laten we maar meteen ter zaken komen. Deze tutorial is niet echt geschikt voor onervaren webdevelopers (of hoe je het ook noemt), maar door het copy-pasten van de code kun je ook een hoop leren.

Stap 1 : jQuery linken
Include de jQuery library in je als volgt (ik heb hier bersie 1.2.1, maar dit veranderd nogal eens):
HTML4STRICT
  1. <script type="text/javascript" src="../jquery-1.2.1.js"></script>


Stap 2 : De callback
Voeg daarna in de de volgende javascript functie toe. In deze functie gebeurd alle "magie":
JAVASCRIPT
  1. function addNumbers() {
  2.      var number1 = $('#number1').attr('value');
  3.      var number2 = $('#number2').attr('value');
  4.      $.get("giveMeSomething.php", { number1: number1, number2: number2 },
  5.          function(data){
  6.             alert("Data Loaded: " + data);
  7.      });
  8. }

In regel 2 word de value (waarde) uit het eerste veld gehaald. Deze gebruik je in regel 4 om aan de AJAX callback mee te geven. In regel 3 doe je hetzelfde voor de tweede waarde uit het tweede invulveld. In regel 4 tot en met 7 doe je de daadwerkelijke callback. De functie heb ik express even over meerdere regels gezet, maar het kan natuurlijk allemaal in 1 regel, zodat je tegen je vrienden kunt zeggen dat je een AJAX callback doet in 1 regel.
Als eerste parameter geef je aan welk PHP (of wat dan ook) bestand benaderd moet worden. In dit geval heb ik een bestand gemaakt dat in dezelfde directory staat als de HTML, met de naam "giveMeSomething.php". Hierin worden de bewerkingen gedaan (zie stap 4). Daarna geef je tussen accolades alle waardes die je door wil sturen naar je PHP bestand. Je ziet dat er steeds 2 variabelen staan, gescheiden door komma's. Links van de dubbele punt staat de naam van variabele in het PHP bestand en rechts van de komma de waarde die daaraan toegekend moet worden. In dit geval worden de waardes meegegeven die je in regel 2 en 3 hebt gedefinieerd.
na de parameters word een functie gedefinieerd die uitgevoerd word nadat de callback geslaagd is. De data die je mee krijgt (en in een alert zet) is alles wat geprint word in het PHP bestand.

Stap 3 : Formulier
Voeg de input velden en de button toe in de body:
HTML4STRICT
  1. <input type="text" id="number1" value="0" /> + <input type="text" id="number2" value="0" />
  2. <input type="button" onclick="addNumbers();" value="=" />


Stap 4 : PHP bestand
Maak een nieuw php bestand met de naam "giveMeSomething.php" en deze inhoud:
PHP
  1. <?
  2. echo $_REQUEST['number1'] + $_REQUEST['number2'];
  3. ?>

Comments

Name: DreamDealer (12 December 2007 - 15:56)
Hoi Oscar,

Het is natuurlijk niet verplicht om een alert te gebruiken, maar het is wel makkelijk om even te testen wat er gebeurd in je PHP pagina. Alles wat je daar echo-ed krijg je te zien in je alert als je het zo doet. Dit is erg handig met debuggen. Ik heb in mijn functies altijd een alert staan (in de comments), dan hoef ik maar twee slashes weg te halen om mijn code te kunnen debuggen.

Als je in je PHP dit doet:

echo json_encode($object);

Dan wordt de data uit je PHP als json encoded object teruggestuurd naar je Javascript zodat je deze in JS ook weer als object kunt parsen. Enige wat je dan toe moet voegen in je JS is het volgende:

var dataArr = eval("("+data+")");

Je kunt daarna bijvoorbeeld de value "id" in je object aanspreken als:

dataArr.id

Waarschijnlijk voor jouw overbodige informatie, maar voor anderen misschien wel interessant.
Name: Oscar (12 December 2007 - 00:37)
Persoonlijk heb ik een hekel aan de javascript alert functie, dus resultaat weergeven op de pagina:

vervang: alert("Data Loaded: " + data);
met: $("#results").append("Resultaat: " + data);

en dan dit in de body

Verder leuke tutorial

Post a comment

Name:

Comment:

Are you a real person or a spambot?

Copy the text above in the field below: