이번에는 PHP와 JavaScript를 사용하여 웹 페이지에 동적으로 데이터를 출력하는 방법을 알아보겠습니다. 이를 위해 PHP에서 JSON 데이터를 생성하고, JavaScript를 사용하여 해당 데이터를 웹 페이지에 출력하는 방법을 살펴보겠습니다.

PHP로 JSON 데이터 생성하기

먼저, PHP에서 JSON 데이터를 생성하는 방법에 대해 알아보겠습니다. PHP에서는 json_encode 함수를 사용하여 배열이나 객체를 JSON 형식으로 변환할 수 있습니다. 예를 들어, 다음과 같은 PHP 코드를 사용하여 JSON 데이터를 생성할 수 있습니다.

<?php
$data = array(
    "name" => "John Doe",
    "age" => 30,
    "city" => "New York"
);

$json_data = json_encode($data);
echo $json_data;
?>

위의 예제에서는 json_encode 함수를 사용하여 $data 배열을 JSON 형식으로 변환한 후, 이를 웹 페이지에 출력하고 있습니다.

JavaScript를 사용하여 JSON 데이터 가져오기

이제, JavaScript를 사용하여 웹 페이지에서 PHP로부터 생성된 JSON 데이터를 가져오고 출력하는 방법에 대해 살펴보겠습니다. JavaScript에서는 XMLHttpRequest 객체나 fetch API를 사용하여 서버로부터 데이터를 비동기적으로 가져올 수 있습니다.

let xhr = new XMLHttpRequest();
xhr.open('GET', 'get_json_data.php', true);
xhr.send();

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        let json_data = JSON.parse(xhr.responseText);
        // JSON 데이터를 웹 페이지에 출력
        document.getElementById('output').innerHTML = 'Name: ' + json_data.name + '<br>' +
                                                       'Age: ' + json_data.age + '<br>' +
                                                       'City: ' + json_data.city;
    }
};

위의 JavaScript 코드에서는 XMLHttpRequest 객체를 사용하여 서버로부터 JSON 데이터를 가져온 후, 해당 데이터를 웹 페이지에 출력하고 있습니다.

이제 위의 PHP와 JavaScript 코드를 조합하여, PHP에서 생성된 JSON 데이터를 JavaScript를 사용하여 웹 페이지에 동적으로 출력할 수 있습니다.

이상으로 PHP에서 JSON을 사용하여 웹 페이지에 동적으로 데이터를 출력하는 방법에 대해 알아보았습니다.

참고 문헌:

• PHP 공식 문서
• MDN web docs