JSON verisi okuması..

Bu konu boş.

1 yazı görüntüleniyor (toplam 1)

Yazar

Yazılar

Aralık 29, 2024: 5:09 pm #88

Anahtar yönetici

Aşağıda, PHP ile sunucudan JSON verisi okumayı, bu veriyi JavaScript ile işleyip kullanıcıya HTML ile sunmayı gösteren tam bir örnek bulabilirsiniz. Bu örnekte, PHP tarafı JSON verisini hazırlayacak ve JavaScript, bu veriyi alıp HTML üzerinde gösterecek.

1. PHP Sunucu Tarafı (JSON Verisini Sağlayan)

<?php
// data.php dosyasında sunucudan JSON verisini sağlıyoruz
header('Content-Type: application/json');

// JSON formatında veriyi oluşturuyoruz
$data = [
    "status" => "success",
    "message" => "Veri başarıyla yüklendi.",
    "users" => [
        ["id" => 1, "name" => "Ahmet", "age" => 25],
        ["id" => 2, "name" => "Mehmet", "age" => 30],
        ["id" => 3, "name" => "Ayşe", "age" => 22]
    ]
];

// JSON formatında çıktı veriyoruz
echo json_encode($data);
?>

2. HTML ve JavaScript Tarafı (JSON’u Alıp Gösteren)

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP ile JSON Okuma</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        #users {
            margin-top: 20px;
        }
        .user {
            background-color: #e9e9e9;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
        }
        .user p {
            margin: 5px 0;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Sunucudan JSON Verisi</h1>
    <div id="users">
        <!-- Kullanıcı verileri buraya eklenecek -->
    </div>
</div>

<script>
    // JSON verisini almak için fetch kullanıyoruz
    fetch('data.php')
        .then(response => response.json())  // JSON'a dönüştür
        .then(data => {
            if (data.status === 'success') {
                // Verileri ekranda göstermek için
                const usersContainer = document.getElementById('users');
                data.users.forEach(user => {
                    const userDiv = document.createElement('div');
                    userDiv.classList.add('user');
                    userDiv.innerHTML = `
                        <p><strong>Adı:</strong> ${user.name}</p>
                        <p><strong>Yaşı:</strong> ${user.age}</p>
                    `;
                    usersContainer.appendChild(userDiv);
                });
            } else {
                alert("Veri yüklenirken bir hata oluştu.");
            }
        })
        .catch(error => console.error('Hata:', error));
</script>

</body>
</html>

Açıklama:

PHP Tarafı (data.php):
- PHP tarafı JSON formatında veri döndürüyor. Burada kullanıcılar ve bir başarı mesajı bulunuyor.
- header('Content-Type: application/json'); satırı, PHP’nin çıktısının JSON formatında olduğunu belirtir.
- json_encode($data); fonksiyonu, PHP dizisini JSON formatına dönüştürür.
HTML ve JavaScript Tarafı:
- fetch('data.php') ile PHP tarafındaki data.php dosyasından JSON verisi alınıyor.
- response.json() ile gelen veriyi JSON formatında işliyoruz.
- Veriler başarıyla alındığında, her bir kullanıcıyı users div’i içinde göstermek için bir div elementi oluşturuluyor.
CSS:
- Sayfa tasarımı için basit bir stil uygulanmıştır. Sayfa, biraz daha okunabilir ve modern bir görünüme kavuşturulmuştur.

Çalıştırma Adımları:

PHP sunucusunu çalıştıran bir ortamda (XAMPP, WAMP, LAMP, vb.) bu dosyaları yerleştirin.
data.php dosyasını PHP sunucusunda çalıştırın.
HTML dosyasını tarayıcıda açın ve sunucudan gelen JSON verisini görün.

Sonuç:

Bu örneği çalıştırarak, PHP ile sunucudan JSON verisini okuyabilir ve bu veriyi JavaScript ile işleyip HTML üzerinde kullanıcıya gösterebilirsiniz.

Yazar

Yazılar