如何用PHP实现JSON API数据自动更新（无需刷新页面）

嘿，我来帮你搞定这个问题！你的PHP代码能正常获取数据，但因为PHP是服务器端语言，页面加载完成后就没法主动更新内容了。要实现无刷新自动更新，咱们得结合前端JavaScript来定时请求数据并更新页面元素。下面给你两种实用的方案：

方案一：前端直接调用API（最简洁） #

Blockchain的这个价格API支持跨域请求，所以咱们可以直接在前端用JS定时拉取数据，不用绕PHP中转：

<!DOCTYPE html>
<html>
<head>
    <title>实时比特币价格</title>
</head>
<body>
    <h3>当前比特币价格（USD）：<span id="btcPrice">加载中...</span></h3>

    <script>
        // 定义更新价格的函数
        function updateBtcPrice() {
            fetch('https://blockchain.info/ticker')
                .then(response => response.json())
                .then(data => {
                    const priceUSD = data.USD.last;
                    // 把价格更新到页面上的元素里
                    document.getElementById('btcPrice').textContent = priceUSD.toFixed(2);
                })
                .catch(error => {
                    console.error('获取数据出错啦:', error);
                    document.getElementById('btcPrice').textContent = '获取失败';
                });
        }

        // 页面刚加载时先获取一次价格
        updateBtcPrice();
        // 每隔10秒自动更新一次（你可以改成5000就是5秒，按需调整）
        setInterval(updateBtcPrice, 10000);
    </script>
</body>
</html>

方案二：通过PHP代理（适合需要后端处理的场景） #

如果你还是想通过PHP来处理数据（比如要加一些额外的逻辑，比如缓存数据减轻API压力），可以写个简单的PHP接口，然后前端定时请求它：

第一步：创建get-btc-price.php文件 #

<?php
// 设置返回JSON格式的响应头
header('Content-Type: application/json');
// 拉取API数据并直接返回
$json = file_get_contents('https://blockchain.info/ticker');
echo $json;
?>

第二步：前端页面代码 #

<!DOCTYPE html>
<html>
<head>
    <title>实时比特币价格</title>
</head>
<body>
    <h3>当前比特币价格（USD）：<span id="btcPrice">加载中...</span></h3>

    <script>
        function updateBtcPrice() {
            // 请求咱们自己的PHP接口
            fetch('get-btc-price.php')
                .then(response => response.json())
                .then(data => {
                    const priceUSD = data.USD.last;
                    document.getElementById('btcPrice').textContent = priceUSD.toFixed(2);
                })
                .catch(error => {
                    console.error('获取数据出错啦:', error);
                    document.getElementById('btcPrice').textContent = '获取失败';
                });
        }

        // 初始化加载+定时更新
        updateBtcPrice();
        setInterval(updateBtcPrice, 10000);
    </script>
</body>
</html>

几个小提示 #

• 定时间隔：setInterval的第二个参数是毫秒数，10000就是10秒，你可以根据需求调整，别太频繁哦，不然可能被API限制请求。
• 价格格式化：toFixed(2)是把价格保留两位小数，让显示更整齐，不需要的话可以去掉。
• 错误处理：加了catch块，就算请求失败，页面也不会一直显示“加载中”，用户体验更好。

这样就能实现页面不用刷新，自动更新比特币价格啦！

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