Johnny Hogenbirk: Artikelen, code-snippets, etc.


Home

Form submit via Ajax - 07-02-2020


Inleiding

Veelal wordt voor het versturen van gegevens van de browser naar de webserver een HTML form gebruikt. Het effect is dat het gehele venster telkens geheel wordt ververst. Met de snelle verbindingen van tegenwoordig (anno 2019) lijkt dat niet meer zo'n probleem. En plaatjes en Javascript wordt gecached. Maar toch, de cache kan uitgeschakeld zijn en onnodig data verkeer is nooit handig.
Kan het dan anders? Zeker, met Ajax in Javascript.
Let wel, het is een geheel ander concept. Een bestaande applicatie omzetten is nog niet zo eenvoudig, althans, kost de nodige tijd.
Maar, als je een snellere applicatie wilt of je start van scratch met een nieuwe, lees dan door.


XMLHttpRequest

De Javascript functie die moet worden gebruikt, is XMLHttpRequest. In de basis is deze bedoeld om 'onder water' info van een url/webserver op te halen. Maar je kunt ook informatie meesturen.
Na een klik op een link of button, moet een Javascript functie worden aangeroepen. Deze start met:
var oReq = new XMLHttpRequest();
Uiteraard, voor 'oReq' mag je zelf een andere naam bedenken. 'oReq' is de afkorting van object request.
Vervolgens geef je aan welke functie moet worden aangeroepen als er antwoord van de webserver komt en stel je in dat het om een post gaat (geen get: daarmee verstuur je geen formulier data):
oReq.onload = ajaxSuccess;
oReq.open("post", document.getElementById('{id van het form}').action, true);
ajaxSuccess is de naam van de functie, mag je dus ook een eigen naam voor hanteren.
I.p.v. {id van het form} vul je uiteraard de id van je eigen formulier in.
Dan rest nog maar één actie, het verzenden van de request:
oReq.send(new FormData(document.getElementById('{id van het form}')));


Json

Tot zover eigen niet heel spannend. Dan over naar de webserver, we gaan uit van PHP. In het formulier heb je via action aangegeven naar welke PHP het formulier moet worden verzonden. In de PHP vang je het gewoon af met $_POST.
Ook nix spannends aan. Anders is het met de output. Je stuurt niet een hele HTML pagina terug, maar alleen die HTML die je wilt vervangen in de browser. Bijvoorbeeld de inhoud van de main div.
Daarnaast, het werkt het beste om een json bericht terug te sturen (aldus mijn ervaring, ik ontvang graag andere ervaringen via mail, zie geheel onderaan).
Je kunt dan ook array terug sturen, bijvoorbeeld:
echo json_encode(array("output" => $output, "melding" => $melding));
In $output zit dan de HTML die je in de div wilt plaatsen. Met de optionele $melding kun je dan in de browser bijvoorbeeld bovenaan tekst plaatsen: 'De gegevens zijn opgeslagen', of zoiets.


Json

En nu weer terug in de browser. We hebben aangegeven dat de functie ajaxSuccess moet worden aangeroepen.
Met de volgende code vangen we het json bericht op:
response_text = JSON.parse(this.responseText);
Vervolgens kunnen we 'melding' en 'output' eruit halen. De output kunnen we in een div plaatsen, bijvoorbeeld:
if (response_text.output !== '') {
  document.getElementById('output').innerHTML = response_text.output;
}
Uiteraard is 'output' de id van een object waarin we de HTML code plaatsen.
En klaar alweer. Dat was alles.

Note: er zit nog wel een adder onder het gras. Bij een PHP error krijg je de melding niet mooi terug in je browser. Immers, je vangt de retour waarde als json terug.
Wat je kunt doen is de vraag stellen of er een response_text.output en response_text.melding aanwezig is. Zo niet, plaats dan de gehele response in de div.
Een ander idee die ik wel eens heb toegepast, bij een bepaald type fouten, die je via try afvangt, is het verzenden van een email, met de fouttekst.


Slot

Zelf de code uitproberen? Klik dan hier

De code downloaden? Klik dan hier


Opmerkingen? Ze zijn van harte welkom: email@johnnyhogenbirk.nl!