Адпраўка формаў у 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:3001/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';
	}
}

Стварыце форму і файл для яе апрацоўкі. Адпраўце форму і праверце, што даныя сапраўды прыйшлі на сервер.