Lomakkeiden lähettämismenetelmät JavaScriptissä

Lomakkeita voidaan lähettää kahdella tavalla: GET- tai POST-menetelmällä. Lomakkeen lähetystapa säädetään lomakkeen method-attribuutilla.

Esimerkiksi, määritetään lomakkeelle GET-lähetysmenetelmä:

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

Ja nyt POST-menetelmä:

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

Katsotaan nyt, mitä eroa on näiden kahden lähetysmenetelmän välillä. GET-menetelmän tapauksessa lomakkeen tiedot näkyvät selaimessa niin kutsutussa parametririvissä (query string), joka edustaa avain-arvo -pareja, joissa avain on lomakeelementin nimi ja arvo on siihen syötetyt tiedot. Tässä tapauksessa arvoparit erotetaan &-merkeillä.

GET-menetelmällä lähetetyt tiedot päätyvät palvelimellamme datan objektin get-ominaisuuteen:

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

Ja POST-menetelmällä lähetetyt tiedot päätyvät palvelimellamme datan objektin post-ominaisuuteen:

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

Lyhyyden vuoksi voit suorittaa destrukturoinnin saadaksesi tietomme erilliseen muuttujaan:

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