如何从CurrencyConverterAPI返回的JSON中提取汇率值并显示在页面？

没问题，你已经成功拿到了接口的返回数据，接下来只需要两步就能把转换值显示到页面上：

1. 在页面中添加一个用于展示结果的元素 #

首先，在你的HTML里添加一个容器（比如<div>或者<span>），给它一个唯一的ID，方便后续用jQuery定位它：

<div id="conversion-result"></div>

2. 修改jQuery回调函数，取出val值并插入到页面 #

你已经通过$.get拿到了返回的对象theValue，这个对象里的EUR_USD属性下的val就是你要的转换值。只需要在回调函数里链式访问这个值，然后把它设置到刚才的容器里就行：

修改后的完整代码如下：

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'> </script> 
<!-- 添加展示结果的容器 -->
<div id="conversion-result"></div>
<script> 
$.get('http://free.currencyconverterapi.com/api/v5/convert?q=EUR_USD&compact=y', function(theValue) { 
    // 取出EUR_USD对应的val值
    var conversionValue = theValue.EUR_USD.val;
    console.log(conversionValue); // 现在控制台会直接打印1.178548
    // 将值插入到页面的容器中，也可以根据需求自定义显示文本
    $('#conversion-result').text("1欧元 = " + conversionValue + "美元");
})
// 可选：添加错误处理，避免请求失败时无提示
.fail(function() {
    $('#conversion-result').text("获取转换数据失败，请稍后重试");
});
</script>

关键解释 #

• theValue.EUR_USD.val：因为接口返回的JSON结构是{EUR_USD: {val: 数值}}，所以需要通过对象属性链式访问到val字段。
• $('#conversion-result').text(...)：用jQuery的text()方法把文本内容插入到指定容器中，如果你需要格式化样式（比如加粗、添加颜色），可以改用html()方法。

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