Слање образаца у 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';
	}
}

Направите образац и фајл за његову обраду. Пошаљите образац и проверите да ли су подаци заиста стигли на сервер.