jQuery Ajax ile Anlık Veri Listeleme

Öncelikle artık sayfa yenilenmeden yani anlık olarak veri çekme olayına alışmanız gerektiğini söyleyebilirim. Ajax kullanımı ile birçok olayı kullanıcı tatmin edecek şekilde sayfayı refresh etmeden yapabiliyoruz. İd ye göre veri çekme , veri ekleme , giriş yapma , silme gibi birçok olayı yapabiliyoruz. Şimdi kısa süre önce yapmış olduğum bir projeden esinlenerek buraya atmak istediğim derse giriş yapıyorum. Çok temel olacak basit , anlaşılır. Bir buton olacak ve seçiciler yardımı ile buna tıklandığında ne yapılacağına farklı bir php dosyasında karar vereceğiz. jQuery ajax ile anlık veri listeleme uygulamasında ilk adım olarak  index.php dosyasını yazalım.

Şimdi yukarıdaki olay oldukça net ve açık. Bir buton oluşturdum ve aşağıda da verilerin adresten dönüşte nerede listeneceğini belirledim. Ek olarak butona bir id verdim ve buna click işlemi olduğunda ne olacağına karar vermek adına Ajax fonksiyonumu başlattım. Parametreleri sırasıyla url , type ve success yani işlem başarılı olduğunda yapılacak işlem fonksiyonu olarak 3 bölümde ekledim. Burada eğer bir id değerine göre veri çekecek olsaydık bir data değeri de atayabilirdik. Tabi bunun için li yapısı ya da a değeri içinde id değeri atamak zorunda kalacaktık. Bunu da $(this).attr(‘id’) diyerek alıp bir değişkene atayıp kullanacaktık.Ama şimdi bütün verileri çekmek istediğimiz için izlediğimiz yol gayet doğal. İkinci olarak gidecek adres olan select.php dosyasına giriş yapalım.

Burada bir veritabanımız elbette olacak ben gerekli ayarlamaları yaptım ve notlar tabloma bağlanıp verimi çektim. Şimdi ilk kodlarda success fonksiyonunda result diye bir değişken belirledik. Burada anlatılmak istenen şudur ” ajax fonksiyonu ile işlemin yapıldığı sayfada dönen değer ne ise bunu olduğu gibi veriler klasına sahip divin içine yaz”. Zaten veri çekme olayına kadar gelmişseniz bir div ya da etiketin içine değer yazmayı da biliyor olmalısınız. Şimdi butona tıkladığımızda veri ya da verilerin anlık olarak sayfa yenilemesi yapılmadan index sayfamıza düştüğünü görebilirsiniz.

Daha düzenli bir listeleme yapmak isterseniz boostrap kütüphanesi dahil edebilirsiniz. Kısa süre sonra anlık olarak veri silmeyi de ekleyeceğim. Sorularınız olursa  ve eklemediğim (bildiğinizi varsaydığım) bölümleri isterseniz yorumda belirtebilirsiniz.

AuthorYazar Hakkında

Bu adam ; bilgi sahibi olduğu konularda makalelerini daha bilgilendirici hale getirip görseller ile süslüyor ve seo uyumlu makaleler ortaya çıkarıyor. Hazır sistemler, Front End ve Back End , tasarım araçları , seo optimizasyonu , güncel webmaster konuları hakkında bilgi sahibi. Bunları boş zamanlarında burada sizlerle paylaşıyor.

2 thoughts on “jQuery Ajax ile Anlık Veri Listeleme

  1. Hocam merhaba.
    Peki div içine değilde,input içine nasıl yazdırabilirim.
    Teşekkürler

    • .html alanı <div>…<div> alanlarını güncellemeye yarar yani innerHTML' kısmını ifade eder. Eğer input için düzenlemek istiyorsanız .val kullanarak value değerini değiştirebilirsiniz. inputlarda görünen alanlar value olarak kabul edilir.

      $('.veriler').html(result);
      Kısmını şuna çeviriniz:
      $('.veriler').val(result);

Bir cevap yazın

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