Отправка форм в JavaScript

Вы уже умеете работать с элементами форм на JavaScript, обрабатывая их в браузере. Формы, однако, можно также отправлять на сервер, чтобы их обработала серверная часть сайта, написанная на PHP или NodeJS.

Это нужно для того, чтобы добавлять и изменять данные сайта, хранящиеся на сервере.

Давайте посмотрим, как это делается. Пусть у нас есть несколько инпутов и кнопка:

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

Обернем наши элементы в тег form. В этом случае у нас получится форма, которая по нажатию на кнопку будет отправляться на сервер:

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

Чтобы на сервере можно было получить данные формы, необходимо каждому инпуту дать свое имя:

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

В этом случае на сервер данные формы придут в виде пар ключ-значение, где ключами будут имена элементов формы, а значениями - введенные данные.

Для того, чтобы отправить форму, нет необходимости в сервере. Вы можете скопировать приведенный код формы в любой файл, запустить его в браузер и нажать на кнопку отправки - форма отправится и страница браузера перезагрузится.

При отсутствии сервера, однако, данные формы никуда не попадут. Поэтому давайте будем проверять работу формы вместе с сервером. Пока вы не знаете никаких серверных языков, поэтому потренируемся отправлять форму с помощью нашего учебного HTTP сервера.

Давайте разместим нашу форму в некотором файле так, чтобы она была доступна по адресу http://localhost:3001/form.html:

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

Добавим нашей форме атрибут action, указывающий адрес отправки нашей формы:

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

Теперь в файле server.js напишем обработчик адреса отправки формы:

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

В параметр нашего обработчика попадут отправленные данные формы:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data); // выведется в консоль сервера
    return 'form data received';
  }
}