个人中心
gpt4 book ai didi

php - 如何动态更新div颜色everythime php函数在html页面中重新运行

转载 作者：行者123 更新时间：2023-12-04 01:04:54 26 4
gpt4 key购买 nike

我正在尝试使用一个 div 来显示带有绿色或红色背景色的服务器状态。当 php 函数将 $status 变量设置为绿色或红色时，背景颜色应该改变，这将在 div 中用于设置背景颜色参数!这在我重新加载网页时有效，但我想每隔一段时间运行 php 函数并自动更新 div 字段的颜色，而无需重新加载网页。

看看我现在有什么:

<!DOCTYPE HTML>
<html>
<head>
<h1>Measurements - graphs</h1>
<?php
function getStatus() {
    $status = "#008000";
    $latestFile = '/my/web/logs/logging_rotation.out';
    
    if (file_exists($latestFile)) {
        $fileTime = filectime($latestFile);
        $now = microtime(true);
        $timediff = $now - $fileTime;
    }
    if ($timediff < 60) {
            $status = "#008000";
    } else {
        $status = "#FF0000";
    }
    return $status;
}   
?>
<div style="height: 20px; background-color: <?php echo getStatus()?>;">
Server status
</div>
</head>
<body>
</body>
</html>

所以，我现在想念的是一种间隔运行 php getStatus 的方法，它应该更新背景颜色，它应该更新 div 字段。有办法吗？

根据一些初步建议，我将代码修改为:

<script>
    console.log('Starting doSomething'); // test printout
    async function doSomething() {
        const url = "status.php";
        await fetch(
            url,
            {
                method: "POST",
                body: new URLSearchParams("function=serverStatus")
            }
        )
        .then(response => response.text())
        .then((response) => {
            console.log(response); // printout response
            document.getElementById('serverStatus').style.backgroundColor = response; //set the response from the php function as the background color
        })
        .catch(err => console.log('s/g went wrong', err));
    }
</script>
<script>
    setInterval(doSomething, 1000);
</script>
<div id="serverStatus" style="height: 20px;">Server status</div>

但是，doSomething() 似乎没有执行，因为我没有看到任何 console.log 打印输出!

上面的所有页面都保存为 mypage.php，我用两种方式对其进行了测试:

  1. 在浏览器中重新加载 mypage.php。
  2. 通过 php 命令执行 mypage.php:

php mypage.php > test.html

在这两种情况下，我都没有在 doSomething() 中得到任何打印输出。

这是测试这种 php 页面的正确方法吗？

在进一步尝试后更新，现在它可以工作了，status.php 没有变化，问题是 status.php 的路径:

<script>
    async function doSomething() {
        const url = "/status.php"; // this is the correct path
        await fetch(
            url,
            {
                method: "POST",
                body: new URLSearchParams("function=serverStatus")
            }
        )
        .then(response => response.text())
        .then((response) => {
            console.log(response);
            document.getElementById('serverStatus').style.backgroundColor = response; //set the response from the php function as the background color
        })
        .catch(err => console.log('s/g went wrong', err));
    };
    setInterval('doSomething()', 1000); // correct call of doSomething()
</script>
<h2>Measurements - graphs</h2>
<div id="serverStatus" style="height: 20px;">Server status</div>

以下答案和解决方案均有效!关于第二种方案我修改为:

<script>
  setInterval(function() {
    fetch('/status.php').then(response=>response.text()).then(function(text){
      document.getElementById('serverStatus').style.backgroundColor = text;
    })
  }, 1000) // in milliseconds
</script>
<h2>Measurements - graphs</h2>
<div id="serverStatus" style="height: 20px;">Server status</div>

状态.php:

<?php
    $status = "#008000";
    $latestFile = '/my/web/logs/logging_rotation.out';
    if (file_exists($latestFile)) {
        $fileTime = filectime($latestFile);
        $now = microtime(true);
        $timediff = $now - $fileTime;
    }
    if ($timediff < 60) {
        $status = "#008000";
    } else {
        $status = "#FF0000";
    }
    exit($status); //return the result to the JS
?>

我确实喜欢这两种解决方案，因为一种使用异步编程，另一种非常紧凑!我想在我的情况下，异步编程实际上比我的网站有更多的知识优势，只是通过检查日志文件的最后修改时间是否低于 60 秒来检查我的服务器是否仍在运行。

再次感谢

最佳答案

您将需要 2 个 javascript 函数。

  1. 设置超时()
    https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
    这将每隔一段时间调用一个函数
  2. 获取()
    https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
    这个对服务器进行 http 调用

例子

<script>
var myDiv = document.getElementById('serverStatus');
  setInterval(function() {
    fetch('status.php').then(response=>response.text()).then(function(text){
      myDiv.style.backgroundColor = text;
    })
  }, 1000) // in milliseconds
</script>

或者如果您喜欢冒险:

const myDiv = document.getElementById('serverStatus');
setInterval(async () =>
  myDiv.style.backgroundColor = await (await fetch('status.php')).text(),
  1000 // ms
);

你的status.php只需要返回颜色代码

关于php - 如何动态更新div颜色everythime php函数在html页面中重新运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66869537/

26 4 0
文章推荐： etcd - 如果 etcd raft 的日志复制乱序怎么办？
文章推荐： nhibernate - Fluent NHibernate Mapping 设置为 AllDeleteOrphan 但仍在尝试将数据库中的外键设为空
文章推荐： itextsharp - 如何使用itextsharp向现有pdf添加表单字段？
文章推荐： assembly - 首次使用 AVX 256 位向量会减慢 128 位向量和 AVX 标量操作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com