Испраќање форми во 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';
	}
}

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