13 Aug 2017
jQuery/Ajax ile div içeriğini refresh etme
  • 3959 Okuma
  • 2 Yorum
  • 42 Beğeni

jQuery/Ajax ile div içeriğini refresh etme

Geliştirdiğiniz bir web sitesi üzerindeki bilgilerin güncelenmesi durumunda, bu güncellemeleri kullanıcılara göstermek isterken tüm sayfanın tekrardan çağırılması/yenilenmesi yerine sadece ilgili alanın güncellenmesine ihtiyaç duyabilirsiniz. Bu şekilde siteniz hem daha kullanışlı hale gelir hem de sunucunun yükünü hafifletmiş olursunuz. Bu makalemde bu işlemin jQuery ve Ajax ile nasıl yapılacağını anlatacağım.


Web sitemiz üzerinde duyurular diye bir kısım olsun. Biz bu duyuruların güncellenmesi için tüm sayfayı yenilemek yerine "Duyuruları Güncelle" adında bir buton oluşturup, bu buton sayesinde tüm sayfa yerine sadece duyuruların güncellenmesi örneği üzerinden gidelim. Duyuruların gösterilmesi için div oluşturmak için aşağıdaki kodu kullanabilirsiniz.


<div id="duyurular"> </div>


Sadece duyurular alanının güncellemesi işleminde kullanılacak bir buton ekliyoruz. Bunun için aşağıdaki kodu kullanabilirsiniz.


<button id="duyuru_guncelle">Duyuruları Güncelle</button>


Son şekliyle kodumuz aşağıdaki şekilde oldu.


<div id="duyurular"> 
   <button id="duyuru_guncelle">Duyuruları Güncelle</button>
</div>


Bu şekilde güncelleme için butonu ekledikten sonra, bu butona tıklandığında güncelleme işleminin gerçekleşmesi için jQuery olayı tanımlıyoruz. Bunun için aşağıdaki kodu kullanabilirsiniz.


<script type="text/javascript">
   $(document).ready(function() {
       $("#duyuru_guncelle").click(function(event){
              duyurulari_goster();
      });
   });  
</script>


Bu tanımladığımız jQuery olayı sayesinde, Duyuruları Güncelle butonuna tıklandığında, "duyuruları_goster" adındaki fonksiyonu çalıştırmış olacağız. Şimdi bu fonksiyonu, sadece duyurular alanın güncellemesini yapacak şekilde tanımlıyoruz.


 function duyurulari_goster() {
    $.ajax({
        dataType: 'json',
        url: 'duyurular',
        type:'POST',
        success: function (data) {
            $("#duyurular").html(data);
        },
        error: function (data) {
           console.log("Hata:", data)
        }
    });
}


script kodumuz son haliyle aşağıdaki şekilde oldu.


<script type="text/javascript">
   $(document).ready(function() {
       $("#duyuru_guncelle").click(function(event){
              duyurulari_goster();
      });
  
function duyurulari_goster() {
    $.ajax({
        dataType: 'json',
        url: 'duyurular',
        type:'POST',
        success: function (data) {
            $("#duyurular").html(data);
        },
        error: function (data) {
           console.log("Hata:", data)
        }
    });
}
});
</script>


Sonuç


jQuery ve Ajax sayfa üzerinde tüm sayfanın yenilenmesine gerek olmaksızın işlemler yapmada kullanılmaktadır. Bu makalemde jQuery ve Ajax ile site üzerindeki belirli bir alan olan duyurular kısmının içeriğinin tüm sayfayı tekrardan çağırmadan/ yenilemeden nasıl güncellenebileceğini anlattım. Karşılaştığınız sorunları bana mesaj yoluyla sorabilirsiniz.


Umarım faydalı olur. İyi çalışmalar.


Makaleyi faydalı buldunuz mu ?

Yazar


Legend Engineer

Legend Engineer

Mühendis (Bilgisayar)

Bilgisayar Mühendisliği mezunuyum. Bilgisayar alanında edindiğim bilgileri bu blog üzerinde paylaşıyorum. Beni takipte kalın.

Yorumlar


enes sayacı | 27 Jan 2018

teşekkür ederim faydalı oldu



Legend Engineer

Legend Engineer | 27 Jan 2018

rica ederim.


lastasya | 01 Jan 2020

Tıklayarak değil de her 5 saniyede bir otomatik yenileme nasıl olur?



Legend Engineer

Legend Engineer | 01 Jan 2020

setInterval fonskiyonu ile yapılabilir. Örnek kullanım, setInterval(function() { duyurulari_goster(); }, 5000);


İlginizi Çekebilir

Makale Hakkındaki Düşünçelerinizi Paylaşın