Node.js uygulaması yazarken form işlemlerine ihtiyaç duyabiliriz.Peki form işlemleri ile neler yapabiliriz.
  • Kullanıcılardan veri alıp saklayabiliriz.
    Kullanıcı kayıt bilgileri.
    Kullanıcı fotoğrafları.
    Kullanıcılara anket yaptırabiliriz vs.
  • Çeşitli oyunlar için kullanabiliriz.
    Ör : Doğru mu yanlış mı oyunu ?

Buraya kadar form işlemleri ile basitçe neler yapabiliriz onları öğrendik.Şimdi ise sırada bu form işlemlerini Node.js ugyulamamızda nasıl kullanacağımıza bakacağız.

Form oluşturma

<form action="/kayit" method="post" >
  <fieldset>
    <legend>Kullanıcı bilgileri:
    AD:<br>
    <input type="text" name="ad">
    SOYAD:<br>
    <input type="text" name="soyad">
    YAŞ:<br>
    <input type="text" name="yas">
    <input type="submit" value="Gönder">
  </fieldset>
</form>

Formun çıktısı :

Kullanıcı bilgileri: AD:

SOYAD:

YAŞ:


Formu çalıştırın ve sonucu görün.


Formu kısaca açıklayalım :

Name değeri!!!

  Buradaki en önemli nokta name değeridir. Eğer bu değeri kullanmazsanız sunucu tarafına sadece name eklediğiniz kısımlar gider.

Form öğelerini Node.js ugulamamızda kullanmak

Form öğelerini Node.js uygulamamızda kullanmak için gereken modül body-parser modülüdür;fakat şu anda express modülü ile gömülü bir şekilde geliyor.Bu yüzden express modülünü kullanıyorsanız ekstra olarak body-parser modülünü yüklemenize gerek yok.Şimdi gelelim uygulama dosyamıza.
var express = require('express');
var app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.post('/kayit',function(req,res){
//Bütün form elemanları string ifade olarak gelir!!!
var ad=req.body.ad;
var soyad=req.body.soyad;
var yas=req.body.yas;
res.status(200).send("ADINIZ: "+ad+"<br>"+"SOYADINIZ: "+soyad+"<br>"+"YAŞINIZ:"+yas)
})
Şimdi bakalım sunucu dosyamızda neler yaptık :

Bonus Bölümü (AJAX)

AJAX kodumuz :
$( document ).ready(function() {
$("#kayit").submit(function(event){
    event.preventDefault(); //varsayılan  gönderimini (ajax olmadan) engelleme  
    var post_url = $(this).attr("action"); //formun hangi işlemi yaptığı
    var form_metodu = $(this).attr("method"); //formun metodunu
    var form_elemanları = $(this).serialize(); //form elemanları
    
    $.ajax({
        url : post_url,
        type: form_metodu,
        data : form_elemanları
    }).done(function(sonuc){ //sunucudan gönderilen veri
        alert(sonuc) //Örnek: " ADINIZ:Mustafa Kemal  SOYADINIZ: Atatürk  YAŞINIZ: 19"
    });
});
})