如何通过AJAX POST实现下拉选项变更时更新天气结果并解决相关报错

问题核心原因 #

1. 请求参数完全不匹配：AJAX使用POST方法发送名为selected的城市参数，但weather.php中使用$_GET['city']接收参数，根本取不到城市值，导致后续请求的天气页面URL无效，爬取不到对应内容，访问不存在的数组下标时触发报错。你之前不用下拉框能正常运行，是因为当时是通过GET方式传递city参数，和旧接收逻辑匹配。
2. 无匹配失败兼容逻辑：如果页面结构变化、请求异常导致正则匹配失败，直接访问$result[1]/$image[1]/$dayTime[1]都会触发下标不存在报错。
3. 前后端响应格式不匹配：后端返回JSON格式数据，但前端直接将返回值当做HTML插入节点，无法正常渲染图片和温度文本。

修改方案 #

1. 修改 /modules/weather.php 代码

// 接收POST传递的selected参数，无参数时默认取 Ankara 天气
$city = $_POST['selected'] ?? 'ankara';

$url = "http://www.mynet.com/havadurumu/asya/turkiye/".$city;
$source = file_get_contents($url);

// 先校验第一层匹配是否成功
if (preg_match('@<p class="hvPboxMiddle">(.*?)<\/p>@si', $source, $result)) {
    $dayTime = [];
    $image = [];
    // 匹配需要的字段
    preg_match('@<span class="hvDeg1">(.*?)<\/span>@si', $result[1], $dayTime);
    preg_match('@<img src="(.*?)" alt=".*?" />@si', $result[1], $image);
    
    // 确认字段都匹配成功后，直接输出拼接好的HTML片段
    if (isset($image[1], $dayTime[1])) {
        echo '<img src="'.htmlspecialchars($image[1]).'" width="20" height="20" />'.htmlspecialchars($dayTime[1]);
        exit;
    }
}
// 异常场景返回提示
echo '天气数据获取失败';

2. 优化AJAX请求代码（可选，加异常处理）

$('#city').change(function(event) {
    event.preventDefault();
    $.post('modules/weather.php', { selected: $('#city').val() },
        function(data) {
            $('#wthr').html(data);
        }
    ).fail(function () {
        $('#wthr').html('请求失败，请重试');
    });            
});

内容的提问来源于stack exchange，提问作者user1805543