5 – Sende innlegg med AJAX

av Ole Petter den 3. oktober 2019

Sist oppdatert: 25 oktober, 2019 kl 15:51

---

Asynkron javascript og XML, forkortet til Ajax er en webutviklingsteknikk som kort fortalt dreier seg om å laste inn små elementer til en side uten å laste inn hele siden på nytt hver gang det skjer en forandring.

For å sende informasjon til en database i form av et skjema, og hente informasjonen på en nettside, må man bruke AJAX eller liknende teknikker. I PHP gjøres dette i form av en XMLhttpRequest.

I dette eksempelet brukes et vanlig html-skjema som sendes til en annen fil (insert.php) for å behandle forespørselen. Hvis forespørselen blir godkjent, og databasen oppdatert, kan denne nye informasjonen hentes på index-siden.

For å sende informasjonen til insert.php brukes jquery. Derfor må dette biblioteket inkluderes. CDN kan finnes på linken: https://code.jquery.com/

Tips: Ikke bruk slim-versjonen, ajax virker kun på .min-versjonen, eller uncompressed.

(Jeg brukte versjon 3.11 i dette eksempelet)

Skjemaet (form) har en id-tag med navn my-form, som hentes ved hjelp av en funksjon, og «e.preventDefault()» forhindrer at siden lastes inn på nytt når send-knappen trykkes.

Videre sendes dataen til filen «insert.php», og dataen som sendes blir prosessert i en jQuery-funksjon kalt «serialize()». Dette gjør at dataen sendes i URL til «insert.php» akkurat som en GET-request, men metoden som brukes er POST, så dataen vises ikke i URL.

Hvis skjemaet sendes lagres beskjeden fra «insert.php» i «#message», som er plassert like over skjemaet. Når skjemaet er sendt blir innholdet fjernet via «reset()», som er en funksjon i javascript som fjerner innholdet i input-elementer med samme id som i reset-funksjonen. Dette må da korrespondere med id-en til skjemaet, som i dette tilfellet er «#my-form».

Hvis tilkoblingen til databasen – i dette tilfellet kalt «ajax-movies» – er vellykket, kan data sendes til databasen via AJAX. Da må dataene som er sendt fra skjemaet behandles i script-taggen og videresendes til «insert.php».

Før dataene sendes til databasen må de valideres. Som nevnt i en tidligere artikkel brukes «mysqli_real_escape_string» til å fjerne risiko for SQL-injection, altså å fjerne script som kan manipulere databasen, og gjøre dem om til harmløs tekst.

Deretter sjekkes skjemaene, hvis de ikke er fylt ut vil man via #message få beskjed om å fylle inn dataene på nytt.

Hvis alle feltene er fylt ut sendes skjemaet til databasen og legger til en ny film i tabellen «movies».

Kildekode