Bu örnekte işinizi görür gerekli düzenlemeleri kendinize göre uyarladığınız zaman.
<!DOCTYPE html>
<html>
<head>
<title>Üye Verileri</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Verileri çekme ve tabloyu güncelleme
function verileriCek() {
$.ajax({
url: 'veri_cek.php',
type: 'GET',
dataType: 'json',
success: function(data) {
if (data && data.length > 0) {
var html = '';
for (var i = 0; i < data.length; i++) {
html += '<tr>';
html += '<td>' + data[i].ad + '</td>';
html += '<td>' + data[i].soyad + '</td>';
html += '<td>' + data[i].telefon + '</td>';
html += '</tr>';
}
$('#uye-tablosu').html(html);
}
},
error: function() {
console.log('Veri çekme hatası.');
}
});
}
// İlk verileri çek
verileriCek();
// 10 saniyede bir verileri çek ve tabloyu güncelle
setInterval(function() {
verileriCek();
}, 10000);
});
</script>
</head>
<body>
<table id="uye-tablosu">
<tr>
<th>AD</th>
<th>Soyad</th>
<th>Telefon</th>
</tr>
</table>
</body>
</html>
veri_cek.php
<?php
$uye_verileri = array(
array('ad' => 'Ahmet', 'soyad' => 'Yılmaz', 'telefon' => '1234567890'),
array('ad' => 'Ayşe', 'soyad' => 'Kara', 'telefon' => '0987654321'),
array('ad' => 'Mehmet', 'soyad' => 'Demir', 'telefon' => '5554443333')
);
header('Content-Type: application/json');
echo json_encode($uye_verileri);
?>