如何将Ajax返回的全部结果拼接后输出到#title1元素？

实现代码 #

你可以通过数组的map方法批量提取所有国家名称，拼接后一次性插入页面元素，修改后代码如下：

$('#PostalCodeCountryInfoBtn').click(function() {
    $.ajax({
        url: "libs/php/getPostalCodeCountryInfo.php",
        type: 'GET',
        dataType: 'json',
        success: function(result) {
            console.log(JSON.stringify(result));
            if (result.status.name == "ok") {
                // 遍历所有返回数据提取国家名，用空格拼接后一次性插入#title1
                const allCountryName = result.data.map(item => item.countryName).join(' ');
                $('#title1').html(allCountryName);
                // 如果你还需要保留原来title2到title6的赋值可以保留下面的代码，不需要直接删除即可
                // $('#title2').html(result['data'][1]['countryName']);
                // $('#title3').html(result['data'][2]['countryName']);
                // $('#title4').html(result['data'][3]['countryName']);
                // $('#title5').html(result['data'][4]['countryName']);
                // $('#title6').html(result['data'][94]['countryName']);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // 错误处理逻辑
        }
    }); 
});

补充说明 #

• 如果需要调整国家名之间的分隔符，只需要修改join方法的参数即可：
  • 用逗号分隔：.join(', ')
  • 每个国家名单独一行：.join('<br>')
• 即使后续接口返回的国家数量变化，代码也不需要修改，会自动适配所有返回的国家数据。

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