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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создайте форму и файл для ее обработки. Отправьте форму и проверьте, что данные действительно пришли на сервер.