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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Ajax veri listeleme</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
	$(function(){
		$("#cek").click(function(){
			$.ajax({
				url:'select.php',
				type:'GET',
				success:function(result){
					$('.veriler').html(result);
				}
			});
		});
	});
</script>

	
<button id="cek" class="btn btn-primary">Veri Çek</button>

<div class="veriler"></div>

</body>
</html>

Ş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.

<?php 
require("config.php");
$cek = $db->query("select * from notlar",PDO::FETCH_ASSOC);
if($cek->rowCount()){
	foreach($cek as $row){
		extract($row);
		echo '<li>'.$aciklama.'</li>';
	}
}


?>

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.

AuthorHarun ALP

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. Güncel webmaster konularını işlemekten keyif alıyor ve genelde her makale aslında bir sorunun çözümü niteliğinde.

12 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);

  2. Bir anket hazırlıyorum. bir selectbox da bay ve bayan seçeneği var.
    Kişi bay seçerse başka anket formu gelecek bayan seçerse başka anket formu.
    Bunu birde step bay step vizard uygulamasında yapmak istiyorum 🙂
    ne kadar açıklayıcı yazıyorum değil mi:)

    • Bu kodu okuyabilirseniz size cinsiyeti veriyor sonrasında size kalan sadece farklı iki form html içeriğini sonuca göre if koşulunda male veya female olarak göstermek. İkinci bahsettiğiniz şeyi daha önce kullanmadım o sebepten yorumda bulunamıyorum.

      $(document).ready(function(){
      $(“input[type=’button’]”).click(function(){
      var gender_value = $(“input[name=’gender’]:checked”).val();
      if(gender_value){
      alert(“You are a ” + gender_value);
      }
      });
      });

  3. Merhaba, ben başka sayfadaki div içeriğini çekip bir değişkene aktarmak istiyorum. Bunu nasıl yapacağız. açıklayabilir misiniz?

    • Bu başka bir konunun sorusu ve cevabı burada; https://www.harunalp.com/php-ile-bot-yapimi/ Burada , Preg_match_all kodunu açıkladığım yerde bunu nasıl yapabileceğinizi anlattım. Çektiğiniz veriyi Preg_match_all fonksiyonunda son parametre olarak atayabilirsiniz. yani son parametreniz çektiğiniz veriyi atayabileceğiniz bir değişkendir. Detaylar makalede mevcut. İyi çalışmalar.

    • Çok teşekkür ederim. Makbule geçti.

  4. Çok teşekkür ederim. Makbule geçti.

  5. Hocam selamlar, öncelikle güzel yazı olmuş ellerinize sağlık. Ben PHP ile mysqlden foreach selectin içine veriyi çekiyorum, burada amacım seçilen optiona göre sayfanın biraz aşağısında o optiona ait başka verileri de getirmek. Yazıda bahsetmişsiniz $(this).attr(‘id’) gibi ama pek aklıma oturmadı. Yardımlarınızı bekliyorum, teşekkürler.

  6. Merhaba ben sepet kısmını ajax ile çekiyorum adet arttırma ve eksiltmeyi ajax ile yapıyorum ama sepet ajax ile anlık çekildiği için butonlarda yenileniyor ve bazen tıklanamıyor butonlara bunun için ne yapabilirim?

Yazar için bir yanıt yazın Yanıtı iptal et

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir