jQuery ile Veri Gönderip Almak

Basit bir form tasarımı yapalım. Forma ekleyeceğimiz öğeler ve yapacağımız işlemlerden bahsedelim.
- İki adet metin (ad, soyad) kutusu
- Bir tane buton
- Bir tane de span (sonuc) öğesi hazırlayalım.
- Formda butona tıklayınca (button üzerindeki onclick olayı tetiklenince fnIslem() adlı fonksiyonu çalıştracağız) ad ve soyad değerlerini alıp bir tane sunucu taraflı bir dile (asp, php, .net vs...) gönderip orada işleyelim.
- Sunucu tarafında işlediğimiz bu değerleri aynı JavaScript fonksiyonu yardımıya alalım.
- Elimize ulaşan işlenmiş olan veriyi daha sonra <span class="sonuc">Sonuç Burada Görünecek</span> öğesinin içerisine yazdıralım.
Html Form Betikleri

<form method="post" action="javascript:;">
  Ad: <input type="text" class="ad" placeholder="Lütfen ad giriniz" /><br />
  Soyad: <input type="text" class="soyad" placeholder="Lütfen soyad giriniz" /><br />
  <input type="submit" value="Gönder" onclick="return fnIslem()" /><br />
  <span class="sonuc">Sonuç Burada Görünecek</span>
</form>

Html Form Betikleri Önizleme


Form tasarımı hazırlığımız bitti. Şimdi sıra sayfamıza jQuery'i dahil edelim. Head etiketlerinin arasına CDN üzerinden jQuery'i çağıralım.
jQuery Kütüphanesini Sayfaya Çağıralım

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

---

Sıra geldi JavaScript fonksiyonumuzu yazmaya.
fnIslem() Adlı Fonksiyon

function fnIslem()
{
  var strAd = $(".ad").val(); // class="ad" input elementine erişim sağladık ve içindeki değeri aldık
  var strSoyad = $(".soyad").val(); // class="soyad" input elementine erişim sağladık ve içindeki değeri aldık
  var strHedefUrl = "ajax.asp"; // Sunucu taraflı işlemler yapacağımız sayfayı belirttik.
  $.ajax
  ({
    type: 'GET',
    url: strHedefUrl,
    cache: false,
    data: 'ad=' + strAd + '&soyad=' + strSoyad + '',
    success: function (strSonuc)
    {
      $(".sonuc").html(strSonuc); // Sunucudan başarılı şekilde işlenen değeri class="sonuc" span öğesine yazdırmış oluyoruz.
    }
  });
}

---

Sunucu taraflı dil olarak orada Klasik ASP tercih ettim, kısa ve kolay yazım şekli olduğu için. Siz orada ajax.asp yerine istediğiniz bir başka sayfayu belirtebilirsiniz. Oraya ait kodlarımızı paylaşalım.
gonder.asp adlı dosyamızın içeriği

strAd = Request("ad")
strSoyad = Request("soyad")
Response.Write "Merhaba adınız: " & strAd & ", soyadınız: " & strSoyad

Sona yaklaştık. Basit şekilde yapmış olduğumuz bu çalışmayı bir örnek ile canlı testini yapalım.