Methoden zum Absenden von Formularen in JavaScript

Formulare können auf zwei Arten abgesendet werden: mit der GET-Methode oder der POST-Methode. Die Art des Absendens wird durch das Attribut method des Formulars gesteuert.

Legen wir beispielsweise die GET-Methode für das Formular fest:

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

Und jetzt die POST-Methode:

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

Sehen wir uns nun den Unterschied zwischen den beiden Absendemethoden an. Bei der GET-Methode sind die Formulardaten im Browser in Form einer sogenannten Abfragezeichenkette (query string) sichtbar, die aus Schlüssel-Wert-Paaren besteht, wobei der Schlüssel der Name des Formularelements ist und der Wert die eingegebenen Daten. Dabei werden die Wertepaare durch kaufmännische Und-Zeichen (Ampersand) getrennt.

Daten, die mit der GET-Methode gesendet wurden, landen auf unserem Server in der Eigenschaft get des Datenobjekts:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.get); // wird in der Serverkonsole ausgegeben
    return 'form data received';
  }
}

Und Daten, die mit der POST-Methode gesendet wurden, landen auf unserem Server in der Eigenschaft post des Datenobjekts:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.post); // wird in der Serverkonsole ausgegeben
    return 'form data received';
  }
}

Der Kürze halber kann eine Destrukturierung durchgeführt werden, um unsere Daten in eine separate Variable zu erhalten:

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