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:

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

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

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

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

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

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

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

server.jsexport default {
  '/handler/': function() {
    return 'form data received';
  }
}

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

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