jQuery Ajax Metodu

Değer dostlarım merhabalar, bu dersimizde JQuery ile Ajax’ı öğreneceğiz. Ajax nedir? Bütün sayfayı kullanıcıya tekrar yükletmeden, sadece gerekli olan veriyi dinamik olarak ekrana getirmek veya sunucuya veri göndermektir. Şimdi bu makalemizde jQuery ile basit bir ajax metodu kullanarak .txt dosyamızda yer alan Html kodlarımızı sayfa yenilenmeden içerisine dahil edeceğiz.

İlk olarak mantığını kavrayalım

İlk olarak demo sayfamızı inceleyelim ve mantığını anlayalım. Ardından aşağıdaki kodları inceleyerek nasıl yapıldığına bakalım.

jQuery Ajax metodumuz  $.ajax({name:value, name:value, ... })  şeklindedir.

index.html dosyamız

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Basit jQuery Ajax Örneği</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("button").click(function(){
            $.ajax({
               url: "demo.txt", 
               success: function(result){
              $(".content").html(result);
            }});
          });
        });
    </script>
</head>
<body>
    <div class="content"></div>
    <button>Ajax ile veri al</button>
</body>
</html>

demo.txt dosyamız

<h2> demo.txt dosyası </h2>
<p> sayfasından gelen içerik </p>

Yukarıda ki kodlarımızı inceledik. Butona tıklandığında $.ajax() metodumuz çalışıyor. Url ile dosyamızı belirttik. Bu işlemlerden sonda eğer işlem başarılı oldu ise succes fonksiyonumuz çalışacaktır. Bize result şeklide cevap gelecektir. $(".content").html(result)  kodumuz ile gelen cevabımızı class’ı content olan div’imizin içerisine ekliyoruz.

Bu şekilde sayfa yükleme yada refresh yapmadan sayfa içeriğini değiştiriyoruz.

Hata Olması Durumunda

Ajax işlemimizde herhangi bir hata ile karşılaşabiliriz. Dosya eksikliği yanlış kod yazımı vb. gibi. Bu durumda Ajax metodumuzun içerisine error fonksiyonumuzu eklememiz yeterli olacaktır. Aşağıdaki kodumuzu inceleyelim.

$(document).ready(function(){
 $("button").click(function(){
    $.ajax({
      url: "demo.txt", 
      success: function(result){
          $(".content").html(result);
          },
      error: function(xhr){
          alert("Alınan hata: " + xhr.status + " " + xhr.statusText);
          }
       });
   });
});

Yukarıdaki kodumuzda işlemimiz başarılı ise çalışsın sayfa yenilenmeden içerik sayfa eklensin, ola ki bir hata varsa kodumuzda bunu bize göster anlamına gelmektedir.

Hepinize kolay gelsin. 🙂 Diğer bir derste görüşmek üzere.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Shares