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