Формаҳоро дар 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';
	}
}

Як форма ва файл барои коркарди он созед. Формаро фиристед ва тафтиш кунед, ки додаҳо дар ҳақиқат ба сервер омадаанд.