Metoder til afsendelse af formularer i JavaScript

Formularer kan afsendes på to måder: med GET-metoden eller POST-metoden. Afsendelsesmåden for formular reguleres af formularens method attribut.

Lad os for eksempel angive GET-metoden for formularafsendelse:

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

Og nu POST-metoden:

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

Lad os nu se, hvad forskellen er mellem de to afsendelsesmetoder. I tilfælde af GET-metoden vil formular data være synlige i browseren i form af såkaldt parameterstreng (query string), som repræsenterer par af typen nøgle-værdi, hvor nøglen vil være navnet på formularelementet, og værdien - de indtastede data i den. Par af værdier vil være adskilt af &-tegn.

Data sendt med GET-metoden vil på vores server ende i egenskaben get i objektet med data:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.get); // vil blive vist i serverkonsollen
    return 'form data received';
  }
}

Og data sendt med POST-metoden vil på vores server ende i egenskaben post i objektet med data:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.post); // vil blive vist i serverkonsollen
    return 'form data received';
  }
}

For kortheds skyld kan man udføre destrukturering for at få vores data i en separat variabel:

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