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://localhost:3001/form.html манзилида мумкин бўлганидек, ўқув 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';
	}
}

Ишлов беришчимизнинг параметрига юборилган форма маълумотлари тушadi:

export default {
	'/handler/': function(data) {
		console.log(data); // сервер консолига чиқади
		return 'form data received';
	}
}

Форма ва уни ишлов бериш учун файл яратинг. Формани юбориб кўринг ва маълумотлар ҳақиқатан ҳам серверга келганлигини текширинг.