使用JQuery每秒刷新含PHP变量的div问题求助

我来帮你排查并修复这个问题，你的代码主要有两个关键问题导致页面空白且无法刷新：

问题1：PHP文件没有输出有效数据 #

你的date.php只定义了$date变量，但没有输出任何内容，而且前端代码尝试解析JSON格式的数据，这就导致AJAX请求拿到的是空内容，解析JSON失败后success回调根本不会执行。

问题2：只执行了一次AJAX请求 #

原代码用setTimeout(request, 1000)只会在页面加载1秒后执行一次请求，无法实现每秒自动刷新的效果。

修正后的完整代码 #

1. 更新date.php，输出JSON格式数据

修改PHP文件，让它把日期变量包装成JSON格式输出：

<?php
$date = date('d/m/Y H:i:s');
// 将日期数据编码为JSON并输出
echo json_encode(['date' => $date]);
?>

2. 修正HTML中的JavaScript代码

我们可以用两种方式实现每秒刷新，推荐第二种更稳妥的方案：

方案一：使用setInterval（简单直接）

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $(document).ready(function() {  
        function request() {
            $.ajax({
                url: "date.php",
                dataType: "json", // 直接指定为JSON类型，jQuery会自动解析
                cache: false,
                success: function(data) {
                    $('#result').html(data.date);
                },
                // 增加错误处理，方便调试
                error: function(xhr, status, err) {
                    console.log('请求失败：', err);
                }             
            });              
        }

        // 页面加载后立即执行一次，避免等待1秒才显示内容
        request();
        // 每秒执行一次请求
        setInterval(request, 1000);
    });
    </script>
</head>

<body>
  <div id="result"></div>
</body>
</html>

方案二：递归调用setTimeout（避免请求堆积）

如果网络延迟导致某次请求耗时超过1秒，setInterval会继续发起新请求，可能造成请求堆积。用递归的setTimeout可以确保上一次请求完成后再发起下一次：

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $(document).ready(function() {  
        function request() {
            $.ajax({
                url: "date.php",
                dataType: "json",
                cache: false,
                success: function(data) {
                    $('#result').html(data.date);
                    // 请求成功后，1秒后发起下一次请求
                    setTimeout(request, 1000);
                },
                error: function() {
                    // 即使请求失败，也继续尝试刷新
                    setTimeout(request, 1000);
                }             
            });              
        }

        // 初始化执行第一次请求
        request();
    });
    </script>
</head>

<body>
  <div id="result"></div>
</body>
</html>

为什么这样修改？ #

• PHP输出JSON格式数据后，前端AJAX可以直接拿到解析好的对象，不用手动调用$.parseJSON。
• 两种定时器方案都能实现每秒刷新，递归setTimeout更适合网络不稳定的场景，避免请求堆积。

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