如何使用 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