JavaScript-də Formalarin Göndərilməsi

Siz artiq brauzerdə emal etməklə formalarin elementləri ilə JavaScript-də işləməyi bacarırsınız. Ancaq formalar, PHP və ya NodeJS-də yazılmış saytın server tərəfi tərəfindən emal olunması üçün serverə də göndərilə bilər.

Bu, serverdə saxlanılan sayt məlumatlarını əlavə etmək və dəyişdirmək üçün lazımdır.

Gəlin görək bu necə edilir. Tutaq ki, bizim bir neçə input və düyməmiz var:

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

Gəlin elementlərimizi form teqinə bükək. Bu halda, düyməyə basdıqda serverə göndəriləcək bir formamız olacaq:

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

Serverdə formanın məlumatlarını əldə edə bilmək üçün hər bir inputa öz adını vermək lazımdır:

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

Bu halda, formanın məlumatları serverə açar-dəyər cütləri şəklində gələcək, burada açarlar forma elementlərinin adları, dəyərlər isə daxil edilmiş məlumatlar olacaq.

Formanı göndərmək üçün serverə ehtiyac yoxdur. Siz formanın verilmiş kodunu hər hansı bir fayla köçürə, onu brauzerdə işə sala və göndərmə düyməsinə basa bilərsiniz - forma göndəriləcək və brauzerin səhifəsi yenidən yüklənəcək.

Ancaq server olmadıqda, formanın məlumatları heç yerə çatmayacaq. Buna görə də gəlin formanın işini serverlə birlikdə yoxlayaq. Hələlik heç bir server dili bilmirsiniz, ona görə də formanı göndərməyi öz təlim HTTP serverimizdən istifadə edərək məşq edək.

Gəlin formamızı elə bir faylda yerləşdirək ki, http://localhost:3001/form.html ünvanından əldə edilə bilsin:

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

Gəlin formamıza formanın göndəriləcəyi ünvanı göstərən action atributu əlavə edək:

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

İndi server.js faylında formanın göndərilmə ünvanının işləyicisini yazaq:

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

İşləyicimizin parametrinə göndərilmiş forma məlumatları düşəcək:

export default {
	'/handler/': function(data) {
		console.log(data); // server konsolunda görünəcək
		return 'form data received';
	}
}

Bir forma və onun emalı üçün fayl yaradın. Formanı göndərin və məlumatların həqiqətən də serverə çatdığını yoxlayın.