AJAX + PHP를 사용하여 위치의 일몰 시간을 실시간으로 얻는 방법은 무엇입니까?

M66 2025-06-12

최신 웹 개발에서 Ajax 기술을 통해 웹 페이지는 새로 고침없이 서버와 상호 작용하여 사용자 경험을 향상시킬 수 있습니다. 오늘날, 우리는 Ajax와 PHP를 결합하여 기능을 달성합니다. 사용자의 위치 정보 (위도 및 경도)를 통해 위치의 일몰 시간을 실시간으로 얻습니다.

1 단계 : 사용자 위치 정보를 얻습니다

먼저 사용자의 지리적 위치 정보를 얻어야합니다. HTML5는 Navigator.geolocation 인터페이스를 제공하며 현재 사용자의 위도와 경도를 얻는 데 사용할 수 있습니다. 이 인터페이스는 브라우저 요청을 통해 사용자 위치 정보를 얻습니다. 코드는 다음과 같습니다.

 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>일몰 시간을 실시간으로 얻으십시오</title>
    <script>
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                alert("이 브라우저는 지리적 위치를 지원하지 않습니다");
            }
        }

        function showPosition(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;

            // 부르다 PHP 일몰 시간을 얻는 인터페이스
            fetchSunsetTime(latitude, longitude);
        }

        function fetchSunsetTime(latitude, longitude) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "https://m66.net/sunset-time.php?lat=" + latitude + "&lon=" + longitude, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var response = JSON.parse(xhr.responseText);
                    document.getElementById("sunset-time").innerHTML = "일몰 시간: " + response.sunset;
                }
            };
            xhr.send();
        }
    </script>
</head>
<body>
    <h1>일몰 시간을 실시간으로 얻으십시오</h1>
    <button onclick="getLocation()">获取当前位置的일몰 시간</button>
    <p id="sunset-time">일몰 시간将显示在这里。</p>
</body>
</html>

위의 코드에서 사용자가 "현재 위치의 일몰 시간 가져 오기"버튼을 클릭하면 브라우저는 사용자의 지리적 위치를 얻도록 요청합니다. 위도와 경도를 얻은 후 AJAX 요청을 통해 PHP 서버 인터페이스를 호출하여 위치의 일몰 시간을 얻습니다.

2 단계 : PHP 백엔드 인터페이스

사용자의 위치에 따라 일몰 시간을 계산하려면 외부 API를 통해 일몰 정보를 얻어야합니다. 여기서 우리는 위도와 경도를 통해 위치의 일몰 시간을 쿼리 할 수있는 공개 API를 사용하고 있습니다. 다음은 AJAX 요청을 처리하고 일몰 시간을 얻는 PHP의 코드입니다.

 <?php
// sunset-time.php

// 사용자가 전달하는 위도와 경도를 얻으십시오
$latitude = isset($_GET['lat']) ? floatval($_GET['lat']) : 0;
$longitude = isset($_GET['lon']) ? floatval($_GET['lon']) : 0;

// 위도와 경도가 유효한지 확인하십시오
if ($latitude == 0 || $longitude == 0) {
    echo json_encode(['error' => '잘못된 위도와 경도']);
    exit;
}

// 무료 태양 위치를 사용하십시오 API 来获取일몰 시간
$url = "https://api.sunsetapi.net/json?lat={$latitude}&lng={$longitude}";
$response = file_get_contents($url);
if ($response === FALSE) {
    echo json_encode(['error' => '无法获取일몰 시간']);
    exit;
}

// 분석 API 반환 된 데이터
$data = json_decode($response, true);

// 确保返回了有效的일몰 시간
if (isset($data['results']['sunset'])) {
    $sunset = $data['results']['sunset'];
    echo json_encode(['sunset' => $sunset]);
} else {
    echo json_encode(['error' => '未能获取일몰 시간']);
}
?>

이 PHP 스크립트에서는 GET 요청을 통해 클라이언트로부터 위도 및 경도 매개 변수 ( LAT 및 LON )를받은 다음 외부 API에 전화하여 해당 위치의 일몰 시간을 얻습니다. 데이터를 얻은 후에는 JSON 형식의 클라이언트로 반환합니다.

3 단계 : 서버를 시작하고 테스트하십시오

위의 HTML 및 PHP 코드를 각각 index.html 및 sunset-time.php 로 저장하십시오.
PHP 환경이 올바르게 실행되고 있는지 확인하십시오 (예 : XAMPP 또는 WAMP 서버 등).
파일을 서버의 루트 디렉토리에 놓고 서버를 시작하십시오.
index.html 페이지를 방문하여 버튼을 클릭하면 페이지에 현재 위치의 일몰 시간이 표시되어야합니다.

결과 표시

사용자가 버튼을 클릭하여 일몰 시간을 얻으면 AJAX 요청은 위도 및 경도 정보를 백엔드 PHP로 전달합니다. 백엔드가 외부 API를 통해 일몰 시간을 얻은 후에는 클라이언트로 반환합니다. 클라이언트는 JavaScript를 통해 페이지 컨텐츠를 업데이트하고 최종적으로 일몰 시간을 표시합니다.

date_sunset