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:

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

A teraz metoda POST:

<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:

export 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:

export 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:

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