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