JavaScript-те форма жіберу

Сіз браузерде өңдеу арқылы форма элементтерімен JavaScript-те жұмыс істей білесіз. Алайда, формаларды PHP немесе NodeJS-те жазылған сайттың серверлік бөлігі өңдеу үшін серверге де жіберуге болады.

Бұл серверде сақталатын сайт деректерін қосу және өзгерту үшін қажет.

Мұны қалай жасауға болатынын қарастырайық. Бізде bірнеша енгізу өрісі мен батырма болсын:

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

Форма және оны өңдеу үшін файл жасаңыз. Форманы жіберіп, деректердің шынымен серверге жеткенін тексеріңіз.