Изпращане на форми в JavaScript

Вече можете да работите с елементи на форми в JavaScript, обработвайки ги в браузъра. Формите обаче могат също да бъдат изпращани към сървъра, за да бъдат обработени от сървърната част на уебсайта, написана на PHP или NodeJS.

Това е необходимо, за да се добавят и променят данни на уебсайта, които се съхраняват на сървъра.

Нека да разгледаме как се прави това. Нека имаме няколко input полета и бутон:

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

Нека обвием нашите елементи в таг form. В този случай ще получим форма, която при натискане на бутона ще бъде изпратена към сървъра:

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

За да може сървърът да получи данните от формата, е необходимо на всяко input поле да се даде уникално име:

<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';
	}
}

Създайте форма и файл за нейната обработка. Изпратете формата и проверете дали данните наистина са пристигнали на сървъра.