如何在网页中添加无需全局刷新即可每分钟自动更新的价格元素

安全阿岳

2026-10-7

实现方案

你当前使用的是服务端PHP渲染逻辑，仅会在页面加载时执行一次生成静态价格文本，要实现无刷新自动更新需要搭配前端JS实现，具体技术方法如下：

可直接落地的实现步骤

第一步：单独封装价格查询接口
把你现有的PHP逻辑单独抽成一个独立的接口文件，比如get_btc_price.php，代码参考：

<?php
$url = "https://api.coindesk.com/v1/bpi/currentprice/USD.json";
$price = json_decode(file_get_contents($url), true);
echo number_format($price['bpi']['USD']['rate_float'],2);
?>

第二步：前端页面上预留价格展示容器，示例代码：
```
<p>当前比特币价格：$<span id="btc-price"></span></p>
```

第三步：添加JS定时请求逻辑，每分钟拉取接口更新价格：

// 页面加载时先获取一次价格
function updateBtcPrice() {
  fetch('/get_btc_price.php')
    .then(res => res.text())
    .then(price => {
      document.getElementById('btc-price').textContent = price;
    })
}
updateBtcPrice();
// 设置每分钟（60*1000毫秒）执行一次更新
setInterval(updateBtcPrice, 60000);