PHP & AJAX met Jquery tutorial

Recent hadden voor een project een creatieve oplossing gemaakt om bepaalde velden in het CMS standaard te “locken” en alleen mensen met een bepaalde user-role mochten de velden unlocken en bewerken. Denk hierbij aan velden als permanames. Omdat dit meer een stukje bescherming van gebruikers dan een echte security kwestie was (in dit geval) leek het ons wel leuk dit met een eenvoudige AJAX call te doen. Met Jquery zijn dit soort opties binnen het handbereik van iedere developer gekomen.

Erover nadenkend hoe lastig dit vroeger was en hoe leuk het nu was realiseerde ik me dat het misschien voor sommige mensen nog niet zo voor de hand liggend was. Daarom deze “super recht toe recht aan” tutorial / voorbeeldcode hoe je een simpele AJAX call naar een PHP script doet vanuit je HTML en het resultaat teruggooit naar de HTML.

De HTML code












Jquery AJAX call example

Klik op een woord hieronder om het resultaat van dat woord op te halen via AJAX en terug te geven als result.

  • Appels
  • Peren
  • Bananen
  • Kersen
  • Pinguins
<< empty >>

De PHP code

$fruits = array('Appels', 'Peren', 'Bananen', 'Kersen');

if(in_array($_POST['ajaxableVar'], $fruits)){
	echo 'Eet veel ' . $_POST['ajaxableVar'] . ' dat is gezond!';
	return;
}

echo $_POST['ajaxableVar'] . ' kun je niet eten!';
return;

Ditzelfde principe kun je ook neerzetten met JSON zodat je bijvoorbeeld een boolean terug kunt geven aan je Jquery code om bepaalde acties wel / niet uit te voeren. Eigenlijk zijn de mogelijkheden redelijk ruim.

* Let op! Het voorbeeld is ZEER basic en vereist wel enige configuratie en mutaties om hem veilig te maken voor je website maar als voorbeeld van het principe dekt het de lading prima.

Download hier de bestanden als .rar

3 Responses

  1. Website maken tips 12 maart 2011 / 10:59

    Hier was ik al een tijdje naar op zoek. Ik ga hier binnenkort eens mee aan de slag! Bedankt voor de tips.

  2. Tes 7 juni 2011 / 00:34

    Er valt niet te klikken op het fruit of de pinguins

    • remko 7 juni 2011 / 14:57

      Hoi Tes,

      Is je testomgeving ergens live te zien? Dan kan ik even met je meekijken. Als ik het zo lees denk ik dat de Jquery library niet ingeladen wordt. Zie bij nader inzien ook dat mijn voorbeeld hierin tekort schiet. Vervang anders eens in jouw code:

      Met:

      Dan pakt je code de laatste versie van dit moment op vanaf de google server ipv. lokaal (zoals in mijn voorbeeld). Ben benieuwd.

Geef een reactie

Jouw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *