JavaScript-da Formlarni Yuborish

Siz allaqachon brauzerdagi form elementlari bilan JavaScript-da ishlashni, ularni qayta ishlashni bilasiz. Biroq, formlarni serverga yuborish ham mumkin, bu esa PHP yoki NodeJS-da yozilgan veb-saytning server tomoni tomonidan qayta ishlanishi uchun.

Bunga serverda saqlanayotgan sayt ma'lumotlarini qo'shish va o'zgartirish uchun zarurat bor.

Keling, buni qanday qilishni ko'ramiz. Faraz qilaylik, bizda bir nechta input va tugma bor:

<input>
<input>
<input type="submit">

Keling, bizning elementlarimizni form tegi ichiga o'rab qo'yamiz. Bunda, tugmani bosganda serverga yuboriladigan forma hosil bo'ladi:

<form>
	<input>
	<input>
	<input type="submit">
</form>

Server formaning ma'lumotlarini olishi uchun har bir inputga o'z nomini berish kerak:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Bunda, serverga formaning ma'lumotlari kalit-qiymat juftliklari ko'rinishida keladi, bunda kalitlar formaning elementlari nomlari, qiymatlar esa kiritilgan ma'lumotlar bo'ladi.

Formani yuborish uchun server shart emas. Siz berilgan formalar kodini har qanday faylga nusxalab, brauzerga yuklab, yuborish tugmasini bosishingiz mumkin - forma yuboriladi va brauzer sahifasi qayta yuklanadi.

Biroq, server bo'lmaganda, formaning ma'lumotlari hech qayerga tushmaydi. Shuning uchun keling, formaning ishlashini server bilan birga tekshiramiz. Hozircha siz hech qanday server tillarini bilmaysiz, shuning uchun formani yuborishni o'zimizning o‘quv HTTP serverimiz yordamida mashq qilamiz.

Keling, formamizni ma'lum bir faylga joylashtiramiz, shunda u http://localhost:3001/form.html manzili orqali ochiq bo'lsin:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Keling, formamizga uning yuborilish manzilini ko'rsatadigan action atributini qo'shamiz:

<form action="/handler/">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Endi server.js faylida formani yuborish manzilining handlerini yozamiz:

export default {
	'/handler/': function() {
		return 'form data received';
	}
}

Bizning handlerimiz parametriga yuborilgan formaning ma'lumotlari tushadi:

export default {
	'/handler/': function(data) {
		console.log(data); // server konsoliga chiqadi
		return 'form data received';
	}
}

Forma va uni qayta ishlash uchun fayl yarating. Formani yuboring va ma'lumotlar haqiqatan ham serverga kelganligini tekshiring.