SEO (Arama Motoru Optimizasyonu) Mikro İnteraktif ÜCRETSİZ - Google Play'den İndirin

jQuery ile Veri Gönderip Almak

jQuery kütüphanesi yardımıyla forma girdiğimiz bilgilerin sayfa yenilenmeden ilgili alanda gösterilmesi

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
jQuery ile Veri Gönderip Almak

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.
Örnek
Ad:
Soyad:

Sonuç Burada Görünecek

Yorumlar

Henüz hiçbir yorum yazılmamış. İlk yorumu siz yapın.

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

INSTAGRAM VIDEO İNDİR

Instagram Video İndirme Aracı

EN

  • Popüler
  • Yeni
  • Son Yorum