如何每 X 秒刷新一个从文件中读取数据的 div？答案

【问题标题】：How to refresh a div every X seconds which reads data from file?如何每 X 秒刷新一个从文件中读取数据的 div？
【发布时间】：2020-09-29 02:03:59
【问题描述】：

我需要在下面的index.php 页面上每隔几秒刷新一次 div。

<?php

session_start();

if (! check_write()) {
    redirect('testlogin.php');
    return;
}

if (file_exists('lmt.json')) {
    $lmt = json_decode(file_get_contents("lmt.json"), true);
}

?>
<!doctype html>
<html lang="en">

<head>
    <title>Home</title>
</head>

<body>
    <div>
        <h1>Website Title</h1> <a href="logout.php">Logout</a> </div>
    <div>
        <p>Welcome back,
            <?= $_SESSION['user_id'] ?>!</p>
    </div>
    <!-- How can I refresh below div every x seconds? -->
    <div>
        <?php if (isset($lmt)) { ?>
            <p>Last modified by <?= $lmt['fname']; ?> at <?= $lmt['ts']; ?></p>
        <?php } ?>
    </div>
    <form method="post">
        <input type="text" name="field1" />
        <input type="text" name="field2" />
        <input type="submit" name="submit" value="Save Data"> </form>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
    $(function() {
        $('form').submit(function(e) {
            e.preventDefault();
            $.post({
                url: 'save.php',
                data: $(this).serialize(),
            }).done(response => {
                response = JSON.parse(response);
                if(response.message) {
                    alert(response.message);
                }
            });
        });
    });
    </script>
</body>
</html>

下面是我想每 X 秒刷新一次的 div。到目前为止，它只是从$lmt 变量中获取值并将其显示给用户，但我想通过从lmt.json 文件中读取每X 秒刷新一次该div，然后显示fname 和ts 变量。

<!-- How can I refresh below div every x seconds? -->
<div>
    <?php if (isset($lmt)) { ?>
        <p>Last modified by <?= $lmt['fname']; ?> at <?= $lmt['ts']; ?></p>
    <?php } ?>
</div>

我怎样才能有效地做到这一点？

【问题讨论】：

这能回答你的问题吗？ AJAX jQuery refresh div every 5 seconds
我认为您正在寻找 JavaScript 的 setInterval
我看到了链接，但我的困惑是 OP 在他的 div 中每 5 秒调用一次 test.php。在我的情况下，我想在 div 中每 X 秒读取一次文件，这就是我感到困惑的地方。我注意到一个答案，我们正在这样做$('#links').load('test.php',function () {。这就是我看到test.php 感到困惑的地方，因为在我的情况下，我需要每 X 秒读取一次文件。

标签： javascript php html jquery ajax

【解决方案1】：

写两个单独的文件index.php（它包含你要刷新的div）和filehandle.php（你应该收到的文件内容）。

index.php

<?php

session_start();

if (! check_write()) {
    redirect('testlogin.php');
    return;
}

?>
<!doctype html>
<html lang="en">

<head>
    <title>Home</title>
</head>

<body>
    <div>
        <h1>Website Title</h1> <a href="logout.php">Logout</a> </div>
    <div>
        <p>Welcome back,
            <?= $_SESSION['user_id'] ?>!</p>
    </div>
    <!-- How can I refresh below div every x seconds? -->
    <div class="update_content"></div>

    <form method="post">
        <input type="text" name="field1" />
        <input type="text" name="field2" />
        <input type="submit" name="submit" value="Save Data"> </form>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>

    var update_time = 1000;
    $.get('filehandle.php', function (data, status){
        $('.update_content').html(data);
    });
    setInterval(function(){
        $.get('filehandle.php', function (data, status){
            $('.update_content').html(data);
        });
    }, update_time);

    $(function() {
        $('form').submit(function(e) {
            e.preventDefault();
            $.post({
                url: 'save.php',
                data: $(this).serialize(),
            }).done(response => {
                response = JSON.parse(response);
                if(response.message) {
                    alert(response.message);
                }
            });
        });
    });
    </script>
</body>
</html>

文件句柄.php

<?php

if (file_exists('lmt.json')) {
    $lmt = json_decode(file_get_contents("lmt.json"), true);
}

if (isset($lmt)) {
    echo "<p>Last modified by ".$lmt['fname']." at ".$lmt['ts']."</p>";
}

?>

将index.php中update_time的值改为你想要的值（指的是每update_time秒更新一次）。

注意：update_time = 1000 -> 1sec, 2000 -> 2sec, ...

【讨论】：

【解决方案2】：

如果您只是在寻找一种快速完成这项工作的方法，我会恳请您访问 w3schools.com。以下是您可能希望从您的网站获得的内容的有趣研究。这是对 vanilla JS 中的 setTimeout() 和 setInterval() 函数的深入了解。编码愉快！

JS Timing

【讨论】：