如何使用jQuery从API获取信息？如何自动更新以太坊价格？

嘿，这个需求很常见，我来给你拆解成两步：先搞定单次获取价格，再加上自动更新的功能，用jQuery就能轻松实现。

1. 基础实现：单次获取并显示价格 #

首先我们需要一个页面元素来展示价格，然后用jQuery的AJAX方法请求目标API。

HTML结构 #

先在页面里加个显示价格的容器：

<div class="price-display">
  以太坊当前价格：<span id="eth-price"></span> USD
</div>

jQuery代码 #

写一个函数来处理API请求和页面更新：

function fetchEthPrice() {
  // 用$.getJSON简化JSON格式的API请求
  $.getJSON('https://api.coinmarketcap.com/v1/ticker/ethereum/')
    .done(function(data) {
      // 这个API返回的是数组，我们取第一个元素就是以太坊的数据
      const ethInfo = data[0];
      // 格式化价格为两位小数，看起来更整洁
      const formattedPrice = parseFloat(ethInfo.price_usd).toFixed(2);
      $('#eth-price').text(formattedPrice);
    })
    .fail(function() {
      // 请求失败时给用户反馈
      $('#eth-price').text('获取失败，请稍后重试');
    });
}

// 页面加载完成后立即执行一次，显示初始价格
$(document).ready(function() {
  fetchEthPrice();
});

这段代码的逻辑很清晰：

• $.getJSON是jQuery专门为JSON API设计的快捷方法，自动处理JSON解析
• .done()处理请求成功的情况，提取价格并更新页面
• .fail()处理请求失败的情况（比如网络问题、API故障）

2. 进阶功能：价格变动自动更新 #

要实现自动刷新，我们可以用setInterval来定时重复执行获取价格的函数。

修改页面加载后的代码：

$(document).ready(function() {
  // 先获取一次初始价格
  fetchEthPrice();
  // 设置每30秒刷新一次（30*1000=30000毫秒）
  setInterval(fetchEthPrice, 30000);
});

注意事项 #

• 不要把刷新间隔设得太短（比如小于10秒），否则可能触发API的限流机制，导致请求被拒绝
• 如果需要显示其他币种的价格，只需要把API URL里的ethereum换成对应币种的英文标识，比如bitcoin，同时修改价格字段（比如price_btc可以获取比特币计价的价格）

额外优化：增强鲁棒性 #

可以在成功回调里加个判断，防止API返回空数据的情况：

.done(function(data) {
  // 检查数据是否有效
  if (!data || data.length === 0) {
    $('#eth-price').text('未获取到有效数据');
    return;
  }
  const ethInfo = data[0];
  const formattedPrice = parseFloat(ethInfo.price_usd).toFixed(2);
  $('#eth-price').text(formattedPrice);
})

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