如何利用AJAX获取的经纬度调用另一接口获取国家代码？

问题说明 #

已有一个通过国家名称获取经纬度的AJAX函数，需要基于该经纬度调用另一个AJAX接口获取国家代码，进而加载国家详细信息，但现有代码未能实现该流程。

问题根源 #

1. AJAX是异步操作，全局变量latitude、longitude可能还未被赋值就触发了getCountryCode，导致参数为空
2. getCountryCode函数没有被主动调用，且依赖不可靠的全局变量传递参数
3. 异步操作没有按顺序执行，countryInfo可能在countryCode赋值前就发起请求

修正后的代码实现 #

$("#innerSelect").on("change", () => {    
    addCountryBorder($("#innerSelect").val());

    // 第一步：获取经纬度
    $.ajax({                              
        url: "libs/php/getCoordsFromCountryName.php",
        type: "GET",
        dataType: "json",
        data: {
            countryName: $("#innerSelect").val()
        },
        success: function(result) {
            if (result.status.name == "ok") {
                const lat = result["data"][0]["geometry"]["lat"];
                const lng = result["data"][0]["geometry"]["lng"];
                map.panTo(new L.LatLng(lat, lng));
                
                // 第二步：用获取到的经纬度请求国家代码
                getCountryCode(lat, lng);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(errorThrown);
        }
    })
});

// 封装获取国家代码的函数，接收经纬度参数
function getCountryCode(lat, lng) {
    $.ajax({
        url: "assets/php/countryCode.php",
        type: "GET",
        dataType: "json",
        data: { lat, lng },
        success: function(result) {
            console.log(JSON.stringify(result));
            if (result.status.name == "ok") {
                const countryCode = result['data'][0]['countryCode'];
                $('#countryCode').html(countryCode);
                
                // 第三步：拿到国家代码后请求国家详细信息
                countryInfo(countryCode);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error('获取国家代码失败:', errorThrown);
        }
    }); 
}

// 修改countryInfo函数，接收countryCode参数
function countryInfo(countryCode) {
    $.ajax({
        url: "assets/php/countryInfo.php",
        type: 'POST',
        dataType: 'json',
        data: { country: countryCode },
        success: function(result) {
            if (result.status.name == "ok") {
                coords.push({currencyCode: result.data[0].currencyCode});
                const formattedPopulation = result['data'][0]['population'].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                const formattedArea = Math.round(result['data'][0]['areaInSqKm']).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                
                $('#continent').html(result['data'][0]['continentName']);
                $('#capital').html(result['data'][0]['capital']);
                $('#countryName').html(result['data'][0]['countryName']);
                $('#population').html(formattedPopulation);
                $('#currencyCode').html(result['data'][0]['currencyCode']);
                $('#area').html(formattedArea);
                
                currencyConverter();
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error('获取国家信息失败:', jqXHR, textStatus, errorThrown);
        }
    });
}

关键改进点 #

• 移除全局变量，改用参数传递数据，避免异步操作导致的变量未赋值问题
• 按异步操作顺序链式调用：获取经纬度 → 获取国家代码 → 获取国家信息，保证每一步都在前一步完成后执行
• 增加错误日志输出，方便调试问题
• 简化代码结构，提升可读性

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