Wysyłanie formularzy w JavaScript

Umiesz już pracować z elementami formularzy w JavaScript, przetwarzając je w przeglądarce. Formularze można jednak również wysyłać na serwer, aby przetworzyła je część serwerowa strony, napisana w PHP lub NodeJS.

Jest to potrzebne, aby dodawać i zmieniać dane strony, przechowywane na serwerze.

Spójrzmy, jak to się robi. Załóżmy, że mamy kilka pól input i przycisk:

<input>
<input>
<input type="submit">

Owińmy nasze elementy w znacznik form. W tym przypadku otrzymamy formularz, który po kliknięciu przycisku zostanie wysłany na serwer:

<form>
	<input>
	<input>
	<input type="submit">
</form>

Aby serwer mógł otrzymać dane formularza, należy każdemu polu input nadać swoją nazwę:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

W tym przypadku dane formularza trafią na serwer w postaci par klucz-wartość, gdzie kluczami będą nazwy elementów formularza, a wartościami - wprowadzone dane.

Aby wysłać formularz, nie jest potrzebny serwer. Możesz skopiować podany kod formularza do dowolnego pliku, uruchomić go w przeglądarce i kliknąć przycisk wysyłania - formularz zostanie wysłany i strona przeglądarki zostanie przeładowana.

Przy braku serwera, jednakże, dane formularza nigdzie nie trafią. Dlatego sprawdźmy działanie formularza razem z serwerem. Na razie nie znasz żadnych języków serwerowych, więc poćwiczmy wysyłanie formularza z pomocą naszego edukacyjnego serwera HTTP.

Umieśćmy nasz formularz w jakimś pliku tak, aby był dostępny pod adresem http://localhost:3001/form.html:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Dodajmy naszemu formularzowi atrybut action, wskazujący adres wysyłki naszego formularza:

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

Teraz w pliku server.js napiszmy handler adresu wysyłki formularza:

export default {
	'/handler/': function() {
		return 'form data received';
	}
}

Do parametru naszego handlera trafią wysłane dane formularza:

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

Utwórz formularz i plik do jego przetwarzania. Wyślij formularz i sprawdź, czy dane rzeczywiście dotarły na serwer.