Methoden voor het verzenden van formulieren in JavaScript

Formulieren kunnen op twee manieren worden verzonden: met de GET-methode of de POST-methode. De verzendmethode van het formulier wordt gereguleerd door het attribuut method van het formulier.

Laten we bijvoorbeeld de GET-verzendmethode voor het formulier specificeren:

public/form.html<form action="/handler/" method="GET">
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

En nu de POST-methode:

public/form.html<form action="/handler/" method="POST">
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

Laten we nu eens kijken wat het verschil is tussen de twee verzendmethoden. In het geval van de GET-methode zullen de formuliergegevens zichtbaar zijn in de browser in de vorm van een zogenaamde query string (query string), die bestaat uit paren van het type sleutel-waarde, waarbij de sleutel de naam van het formulierelement is, en de waarde - de ingevoerde gegevens. Hierbij zullen de waardeparen gescheiden worden door ampersands.

Gegevens die met de GET-methode zijn verzonden, komen op onze server terecht in de eigenschap get van het object met gegevens:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.get); // wordt weergegeven in de serverconsole
    return 'form data received';
  }
}

En gegevens die met de POST-methode zijn verzonden, komen op onze server terecht in de eigenschap post van het object met gegevens:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.post); // wordt weergegeven in de serverconsole
    return 'form data received';
  }
}

Voor de kortheid kan destructuring worden uitgevoerd, om onze gegevens in een aparte variabele te krijgen:

server.jsexport default {
  '/handler/': function({get, post}) {
    console.log(get);
    console.log(post);
    return 'form data received';
  }
}