PHP与JavaScript协同：正确解码并展示外部API数据

{
    "countryCode": "AT",
    "countryName": "Austria",
    "lat": 47.03,
    "lng": 10.2,
    "distance": "0"
}

// 原始PHP代码片段
$decode = json_decode($result,true);    
// 问题所在：只提取了countryCode字符串
$output['data'] = $decode['countryCode']; 

<?php

// 开启错误报告，仅用于开发环境
ini_set('display_errors', 'On');
error_reporting(E_ALL);

$executionStartTime = microtime(true);

// 从GET请求中获取经纬度参数，如果不存在则使用默认值
$lat = isset($_GET['lat']) ? floatval($_GET['lat']) : 47.03;
$lng = isset($_GET['lng']) ? floatval($_GET['lng']) : 10.2;
$username = 'flightltd'; // 替换为你的Geonames用户名

$url = "http://api.geonames.org/countryCodeJSON?formatted=true&lat={$lat}&lng={$lng}&username={$username}";

$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 生产环境请谨慎使用，建议配置CA证书
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url);

$result = curl_exec($ch);

// 检查cURL错误
if (curl_errno($ch)) {
    $error_msg = curl_error($ch);
    curl_close($ch);
    $output['status']['code'] = "500";
    $output['status']['name'] = "error";
    $output['status']['description'] = "cURL Error: " . $error_msg;
    header('Content-Type: application/json; charset=UTF-8');
    echo json_encode($output);
    exit;
}

curl_close($ch);

$decode = json_decode($result, true);

// 检查JSON解码错误
if (json_last_error() !== JSON_ERROR_NONE) {
    $output['status']['code'] = "500";
    $output['status']['name'] = "error";
    $output['status']['description'] = "JSON Decode Error: " . json_last_error_msg();
    header('Content-Type: application/json; charset=UTF-8');
    echo json_encode($output);
    exit;
}

$output['status']['code'] = "200";
$output['status']['name'] = "ok";
$output['status']['description'] = "success";
$output['status']['returnedIn'] = intval((microtime(true) - $executionStartTime) * 1000) . " ms";
// 关键修正：将整个解码后的API响应对象赋给data字段
$output['data'] = $decode; 

header('Content-Type: application/json; charset=UTF-8');
echo json_encode($output);

?>

{
    "status": {
        "code": "200",
        "name": "ok",
        "description": "success",
        "returnedIn": "XXXms"
    },
    "data": { // 现在data是一个对象，包含了API的所有信息
        "countryCode": "AT",
        "countryName": "Austria",
        "lat": 47.03,
        "lng": 10.2,
        "distance": "0"
    }
}

// 原始JavaScript代码片段
if (result.status.name == "ok") {
    // 问题所在：result['data']是一个字符串，不是数组，且尝试访问不存在的属性
    $('#languages').html(result['data'][0]['languages']); 
    $('#distance').html(result['data'][0]['distance']);
    $('#countryCode').html(result['data'][0]['countryCode']);
    $('#countryName').html(result['data'][0]['countryName']);
}

// script.js
$('#firstAPIsubmitButton').click(function() {
    // 获取用户输入的经纬度
    var lat = $('#latInput').val();
    var lng = $('#lngInput').val();

    $.ajax({
        // 将经纬度作为GET参数传递给PHP脚本
        url: "countryCode.php?lat=" + lat + "&lng=" + lng,
        type: 'GET', // 更改为GET请求，因为参数在URL中
        dataType: 'json',
        success: function(result) {
            console.log(JSON.stringify(result));

            if (result.status.name === "ok" && result.data) { // 确保data字段存在
                // 关键修正：直接通过点运算符访问result.data中的属性
                // 注意：此API不返回'languages'字段，因此将其移除或设置为默认值
                $('#distance').html(result.data.distance || 'N/A');
                $('#countryCode').html(result.data.countryCode || 'N/A');
                $('#countryName').html(result.data.countryName || 'N/A');
                // 还可以显示其他字段，如经纬度
                $('#latitude').html(result.data.lat || 'N/A');
                $('#longitude').html(result.data.lng || 'N/A');
            } else {
                // 处理API返回的错误信息或数据为空的情况
                console.error("API Error or no data:", result.status.description);
                alert("获取数据失败：" + (result.status.description || "未知错误"));
                // 清空显示区域
                $('#distance').html('');
                $('#countryCode').html('');
                $('#countryName').html('');
                $('#latitude').html('');
                $('#longitude').html('');
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error("AJAX Error:", textStatus, errorThrown, jqXHR);
            alert("请求失败，请检查网络或服务器日志。");
        }
    });
});

<body>
    <div id="firstAPI">
        <label for="latInput">Latitude:</label>
        <input type="text" id="latInput" value="47.03"><br><br>
        <label for="lngInput">Longitude:</label>
        <input type="text" id="lngInput" value="10.2"><br><br>

        <button id="firstAPIsubmitButton">查询国家信息</button>
        <table>
            <!-- <tr>
                <td align="right">Languages:</td>
                <td id="languages"></td> 
            </tr> -->
            <tr>
                <td align="right">Latitude:</td>
                <td id="latitude"></td>
            </tr>
            <tr>
                <td align="right">Longitude:</td>
                <td id="longitude"></td>
            </tr>
            <tr>
                <td align="right">Distance:</td>
                <td id="distance"></td>
            </tr>

            <tr>
                <td align="right">Country Code:</td>
                <td id="countryCode"></td>
            </tr>

            <tr>
                <td align="right">Country Name:</td>
                <td id="countryName"></td>
            </tr>
        </table>
    </div>
    <script type="application/javascript" src="jquery-2.2.3.min.js"></script>
    <script type="application/javascript" src="script.js"></script>
</body>