Metody wysyłania formularzy w JavaScript

Formularze mogą być wysyłane na dwa sposoby: metodą GET lub metodą POST. Sposób wysyłania formularza jest regulowany przez atrybut method formularza.

Na przykład, ustawmy dla formularza metodę wysyłania GET:

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

A teraz metoda POST:

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

Przyjrzyjmy się teraz, jaka jest różnica między dwoma metodami wysyłania. W przypadku metody GET dane formularza będą widoczne w przeglądarce w postaci tak zwanego ciągu parametrów (query string), reprezentującego pary typu klucz-wartość, gdzie kluczem będzie nazwa elementu formularza, a wartością - wprowadzone dane. Jednocześnie pary wartości będą rozdzielone ampersandami.

Dane wysłane metodą GET trafią na naszym serwerze do właściwości get obiektu z danymi:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.get); // wyświetli się w konsoli serwera
    return 'form data received';
  }
}

A dane wysłane metodą POST trafią na naszym serwerze do właściwości post obiektu z danymi:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.post); // wyświetli się w konsoli serwera
    return 'form data received';
  }
}

Dla zwięzłości można wykonać destrukturyzację, aby otrzymać nasze dane w oddzielnej zmiennej:

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