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 'форманын маалыматы алынды';
	}
}

Биздин иштетүүчүнүн параметрине жиберилген форманын маалыматтары түшөт:

export default {
	'/handler/': function(data) {
		console.log(data); // сервердин консолуна чыгат
		return 'форманын маалыматы алынды';
	}
}

Форма жана аны иштетүү үчүн файл түзүңүз. Форманы жиберип, маалымат чын эле серверге келгенин текшериңүз.