JavaScript'te Form Gönderimi

Artık form elemanlarıyla tarayıcıda işlem yaparak JavaScript'te çalışmayı biliyorsunuz. Ancak, formlar PHP veya NodeJS ile yazılmış sunucu tarafından işlenmesi için sunucuya da gönderilebilir.

Bu, sunucuda saklanan site verilerini eklemek ve değiştirmek için gereklidir.

Bakalım bu nasıl yapılıyor. Diyelim ki birkaç input ve bir butonumuz var:

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

Elemanlarımızı form etiketiyle saralım. Bu durumda, butona tıklandığında sunucuya gönderilecek bir formumuz olacak:

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

Sunucunun form verilerini alabilmesi için her inputa bir isim vermek gerekir:

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

Bu durumda, form verileri sunucuya anahtar-değer çiftleri halinde gelecektir, anahtarlar form elemanlarının isimleri, değerler ise girilen veriler olacaktır.

Formu göndermek için bir sunucuya ihtiyaç yoktur. Verilen form kodunu herhangi bir dosyaya kopyalayabilir, tarayıcıda çalıştırabilir ve gönderme butonuna basabilirsiniz - form gönderilecek ve tarayıcı sayfası yeniden yüklenecektir.

Ancak, sunucu olmadan form verileri hiçbir yere ulaşmaz. Bu yüzden formun çalışmasını bir sunucu ile test edelim. Henüz herhangi bir sunucu tarafı dil bilmiyorsunuz, bu yüzden formu eğitim HTTP sunucumuzu kullanarak göndermeyi deneyelim.

Formumuzu, http://localhost:3001/form.html adresinden erişilebilir olacak şekilde bir dosyaya yerleştirelim:

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

Formumuza, formun gönderileceği adresi belirten action özelliğini ekleyelim:

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

Şimdi server.js dosyasında form gönderme adresi için bir işleyici yazalım:

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

İşleyicimizin parametresine gönderilen form verileri gelecektir:

export default {
	'/handler/': function(data) {
		console.log(data); // sunucu konsoluna yazdırılacak
		return 'form data received';
	}
}

Bir form ve onu işlemek için bir dosya oluşturun. Formu gönderin ve verilerin gerçekten sunucuya ulaştığını kontrol edin.