如何使用AJAX + PHP 實時獲取你所在位置的日落時間？

M66 2025-06-12

在現代Web 開發中，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，可以通過經緯度來查詢該位置的日落時間。以下是我們在PHP 中的代碼，負責處理AJAX 請求並獲取日落時間。

 <?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