PHP文件异步调用：解决天气数据更新中的城市更新问题

php

2024-03-01 15:36:56

PHP POST文件异步调用：更新天气数据

问题概述

通过PHP文件异步调用获取天气数据时，无法在表单提交后更改默认城市，导致天气数据更新不正确。

解决方案

通过POST请求更新$city值，并使用更新后的值获取新的天气数据。

步骤

在geoApi.php中使用POST请求更新$city值：

if($_SERVER['REQUEST_METHOD'] == "POST" && isset($_POST['city']) && !empty($_POST['city'])) {
    $city = $_POST['city'];
}

更新weatherApiUrl以使用$city POST数据：

$weatherApiUrl = "http://api.openweathermap.org/data/2.5/weather?units=metric&q=" . $city . "&appid=" . WEATHER_API_KEY;

在js_php.js中添加代码处理POST请求：

const form = document.querySelector(".card form");

form.addEventListener("submit", (e) => {
    e.preventDefault();
    
    const city = e.target.querySelector("input").value;
    
    fetch('http://localhost/js/weather/apis/geoApi.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            city: city
        })
    })
    .then(response => response.json())
    .then(data => {
        weatherData = data;
    
        let sky = weatherData.weather[0].main.toLowerCase();
        weatherIcon.src = "images/" + sky + ".png";
    
        console.log(weatherData);
    
        document.querySelector(".city").innerHTML = weatherData.name;
        document.querySelector(".temp").innerHTML = Math.round(weatherData.main.temp) + "°c";
        document.querySelector(".humidity").innerHTML = weatherData.main.humidity + "%";
        document.querySelector(".wind").innerHTML = weatherData.wind.speed + " km/h";
    
    })
    .catch((error) => {
        console.error('Error:', error);
    });
});