Comment obtenir le temps de coucher du soleil de votre emplacement en temps réel en utilisant AJAX + PHP?

M66 2025-06-12

Dans le développement Web moderne, la technologie AJAX permet aux pages Web d'interagir avec les serveurs sans rafraîchir, améliorant ainsi l'expérience utilisateur. Aujourd'hui, nous combinerons Ajax et PHP pour atteindre une fonction: obtenir le temps de coucher du soleil de l'emplacement en temps réel via les informations de localisation de l'utilisateur (latitude et longitude).

Étape 1: Obtenez les informations de localisation de l'utilisateur

Tout d'abord, nous devons obtenir les informations de localisation géographique de l'utilisateur. HTML5 fournit une interface Navigator.Geolocation , qui peut être utilisée pour obtenir la latitude et la longitude de l'utilisateur actuel. Cette interface obtient des informations de localisation de l'utilisateur via une demande de navigateur. Le code est le suivant:

 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Obtenez du temps de coucher de soleil en temps réel</title>
    <script>
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                alert("Ce navigateur ne prend pas en charge la géolocalisation");
            }
        }

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

            // Appel PHP Interface pour obtenir le temps de coucher du soleil
            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 = "Temps de coucher: " + response.sunset;
                }
            };
            xhr.send();
        }
    </script>
</head>
<body>
    <h1>Obtenez du temps de coucher de soleil en temps réel</h1>
    <button onclick="getLocation()">获取当前位置的Temps de coucher</button>
    <p id="sunset-time">Temps de coucher将显示在这里。</p>
</body>
</html>

Dans le code ci-dessus, lorsque l'utilisateur clique sur le bouton "Obtenez l'heure du coucher du soleil de l'emplacement actuel", le navigateur demandera pour obtenir l'emplacement géographique de l'utilisateur. Après avoir obtenu la latitude et la longitude, nous appelons l'interface du serveur PHP via une demande Ajax pour obtenir le temps de coucher du soleil de l'emplacement.

Étape 2: Interface backend PHP

Afin de calculer le temps de coucher du soleil en fonction de l'emplacement de l'utilisateur, nous devons obtenir les informations du coucher du soleil via une API externe. Ici, nous utilisons une API publique où nous pouvons interroger le temps de coucher du soleil de l'emplacement par la latitude et la longitude. Voici notre code en PHP qui gère les demandes AJAX et obtient le temps de coucher du soleil.

 <?php
// sunset-time.php

// Obtenez la latitude et la longitude livrées par l&#39;utilisateur
$latitude = isset($_GET['lat']) ? floatval($_GET['lat']) : 0;
$longitude = isset($_GET['lon']) ? floatval($_GET['lon']) : 0;

// Vérifiez si la latitude et la longitude sont valides
if ($latitude == 0 || $longitude == 0) {
    echo json_encode(['error' => 'Latitude et longitude non valides']);
    exit;
}

// Utiliser l&#39;emplacement du soleil gratuit API 来获取Temps de coucher
$url = "https://api.sunsetapi.net/json?lat={$latitude}&lng={$longitude}";
$response = file_get_contents($url);
if ($response === FALSE) {
    echo json_encode(['error' => '无法获取Temps de coucher']);
    exit;
}

// Analyse API Données retournées
$data = json_decode($response, true);

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

Dans ce script PHP, nous recevons les paramètres de latitude et de longitude ( LAT et LON ) du client via une demande GET, puis appelons l'API externe pour obtenir l'heure du coucher du soleil de cet emplacement. Une fois les données obtenues, nous les renvoyons au client au format JSON.

Étape 3: Démarrez le serveur et testez

Enregistrez les codes HTML et PHP ci-dessus en tant qu'index.html et Sunset-Time.php respectivement.
Assurez-vous que votre environnement PHP s'exécute correctement (par exemple, en utilisant le serveur XAMPP ou WAMP, etc.).
Placez le fichier dans le répertoire racine de votre serveur et démarrez le serveur.
Visitez la page index.html et cliquez sur le bouton, et la page doit afficher l'heure du coucher du soleil de votre emplacement actuel.

Affichez les résultats

Lorsque l'utilisateur clique sur le bouton pour obtenir un temps de coucher de soleil, la demande Ajax transmettra les informations de latitude et de longitude au backend PHP. Une fois que le backend a obtenu le temps de coucher du soleil via l'API externe, il le renverra au client. Le client met à jour le contenu de la page via JavaScript et affiche enfin le temps de coucher du soleil.

date_sunset

Connexe