如何在 PHP 页面中使用 jQuery 自动更新内嵌部件？

2024-03-26 07:27:26

利用 jQuery 自动更新 PHP 页面中的内嵌部件

问题

在 PHP index 页面中内嵌不同的部件时，如何实现某个部件的自动更新，从而显示最新信息？

解决方法

要解决此问题，我们可以使用 jQuery 的 setInterval() 和 load() 函数：

加载 jQuery 库： 在 index.php 页面中添加 <script> 标签以加载 jQuery。
自动更新部件： 在需要自动更新的部件中，添加以下脚本：

<script>
var $incomingNews = $("#incomingNews");
setInterval(function () {
    $incomingNews.load("index.php #incomingNews");
}, 60000); 
</script>

$incomingNews 是包含新信息元素的 jQuery 对象。
setInterval() 每隔一段时间（本例为 1 分钟）执行一次函数。
load() 函数使用 AJAX 从 index.php 页面中重新载入 #incomingNews 元素。

输出部件 HTML： 在 index.php 页面中，输出需要自动更新的部件的 HTML 代码：

<div id="incomingNews">
    <!-- 一些代码 -->
</div>

示例代码

<?php
// ... 省略其他代码 ...

// 加载 jQuery 库
echo '<script type="text/javascript" src="js/jquery.js"></script>';

// 输出需要自动更新的内嵌部件
echo '<div id="main">';
    // ... 省略其他代码 ...

    echo '<div id="cols" class="box">';
        include('pages/frame_'.$_SESSION['contentpage'].'.php');

        // 添加自动更新代码
        echo '<script>
        var $incomingNews = $("#incomingNews");
        setInterval(function () {
            $incomingNews.load("index.php #incomingNews");
        }, 60000); 
        </script>';
    echo '</div>'; // padding

    // ... 省略其他代码 ...
echo '</div>'; 
?>