如何编写正确JS代码从PHP获取JSON数据，实现国家选择与边境高亮

先确认PHP端的输出正确性 #

首先要确保你的PHP脚本返回标准的JSON格式，并且设置正确的响应头，否则前端无法正确解析：

<?php
header('Content-Type: application/json'); // 必须设置这个响应头

// 读取GeoJSON文件并处理
$geoJson = file_get_contents('countries.geojson');
$geoData = json_decode($geoJson, true);

// 提取所需字段封装成数组
$countryList = [];
foreach ($geoData['features'] as $feature) {
    $countryList[] = [
        'name' => $feature['properties']['name'],
        'iso' => $feature['properties']['iso'], // 替换成你GeoJSON里实际的ISO字段名
        'geometry' => $feature['geometry']
    ];
}

echo json_encode($countryList);
?>

前端正确的jQuery AJAX实现 #

以下是完整的前端代码，包含数据请求、下拉列表生成和地图高亮逻辑（以Leaflet地图库为例，可替换为你使用的地图框架）：

HTML结构

<select id="countrySelect">
    <option value="">选择国家</option>
</select>
<div id="map" style="width:100vw; height:100vh;"></div>

JavaScript代码

// 初始化地图（Leaflet示例）
const map = L.map('map').setView([0, 0], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

let allCountries = []; // 存储所有国家数据
let highlightLayer = null; // 存储当前高亮的图层

// 发起AJAX请求获取国家数据
$.ajax({
    url: 'your-country-api.php', // 替换成你的PHP文件路径
    type: 'GET',
    dataType: 'json', // 告诉jQuery自动解析JSON响应
    success: function(data) {
        allCountries = data;
        // 生成下拉列表选项
        renderCountryOptions();
    },
    error: function(xhr, err) {
        console.log('数据请求失败:', err);
    }
});

// 生成下拉选项
function renderCountryOptions() {
    const select = $('#countrySelect');
    allCountries.forEach(country => {
        select.append(`<option value="${country.iso}">${country.name}</option>`);
    });
}

// 下拉选择事件处理：高亮对应国家边境
$('#countrySelect').on('change', function() {
    const selectedIso = $(this).val();
    if (!selectedIso) {
        // 清空高亮
        if (highlightLayer) {
            map.removeLayer(highlightLayer);
            highlightLayer = null;
        }
        return;
    }

    // 匹配选中的国家数据
    const targetCountry = allCountries.find(c => c.iso === selectedIso);
    if (targetCountry) {
        // 移除之前的高亮图层
        if (highlightLayer) map.removeLayer(highlightLayer);
        // 创建高亮图层并添加到地图
        highlightLayer = L.geoJSON(targetCountry.geometry, {
            style: {
                color: '#ff4444',
                weight: 3,
                fillOpacity: 0.15
            }
        }).addTo(map);
        // 自动缩放至国家范围
        map.fitBounds(highlightLayer.getBounds());
    }
});

关键注意点 #

• 不要手动解析JSON：设置dataType: 'json'后，jQuery会自动把响应转换为JavaScript对象，直接用data即可，无需再调用JSON.parse()
• 避免错误的路径访问：PHP返回的是对象数组，所以不需要访问result.status这类不存在的字段，直接遍历或查找data里的元素
• 地图高亮逻辑：根据你使用的地图库调整图层创建代码，核心是把国家的geometry数据传入地图的GeoJSON渲染方法

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