使用jQuery刷新PHP并重新加载图片。

Question

使用jQuery刷新PHP并重新加载图片。

javascriptphpjquery

3

我有一个PHP页面/var/www/oggi1ora.php。

首先，我需要执行页面/usr/local/bin/oggi1ora.php来生成图表。

每5秒钟，PHP脚本都能正确地执行，但是页面中的图片没有刷新...我该如何解决这个问题？

我需要每5秒钟执行一次/usr/local/bin/oggi1ora.php。该脚本会生成存储在/var/www/grafici/oggi1ora.png中的图像。

<div class="result">
    <?php exec('php -q /usr/local/bin/oggi1ora.php'); ?>
</div>

<div class="oggi1ora">
<html>
    <body>
       <img src="grafici/oggi1ora.png" id="oggi1ora" border="0" />
    </body>
</html>
</div>

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script>
    function refresh_div() {
        jQuery.ajax({
            url:'oggi1ora.php',
            type:'POST',
            success:function(results) {
                jQuery(".result").html(results);
            }
        });
    }
    t = setInterval(refresh_div,5000);
</script>

这是新的/var/www/oggi1ora.php

<div class="result">
<?php
    header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
    header("Cache-Control: post-check=0, pre-check=0", false);
    header("Pragma: no-cache");
    include('/usr/local/bin/oggi1ora.php');
?>
</div>

<div class="oggi1ora">
<html>
    <img src="grafici/oggi1ora.png" id="oggi1ora" border="0" />
</html>
</div>

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script>
    function refresh_div() {
        var d = new Date().getTime();
        jQuery.ajax({
        url:'oggi1ora.php?ts=' + d,
        type:'POST',
            success:function(results) {
            $("#oggi1ora").attr("src", "grafici/oggi1ora.png?ts=" + d);
            }
        });
    }
    t = setInterval(refresh_div,5000);
</script>

- eliafino

尝试在 oggi1ora.php 中使用 PHP 标头禁用缓存。 - Indrasinh Bihola

oggi1ora.php 返回 Ajax 调用的内容是什么？无论它返回什么，都会被放入顶部 div 中 - 我没有看到任何可以改变页面主体中图像的代码。 - Duncan Cowan

请查看此链接：https://dev59.com/sIzda4cB1Zd3GeqPkk2c - Bugfixer

1

你的标记很奇怪/格式不正确，并且有<div>标签在<body>之外...可能与你的问题无关，但还是要注意一下... - EJTH

1

在每次刷新时向您的图像添加 ?timestamp 以强制浏览器重新加载图像。 - Bugfixer

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Drakes · Accepted Answer

您可能遇到了浏览器缓存问题。解决方法之一是在URL后添加时间戳以确保获取最新版本。或者可以设置服务器端头文件以禁止缓存。对于前一种解决方案，您可以尝试以下操作：

function refresh_div() {
    var d = new Date().getTime();
    jQuery.ajax({
        url:'oggi1ora.php?ts=' + d,
        type:'POST',
        // rest of your code

对于后者，您可以像这样设置标题：

<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

接下来，jQuery(".result").html(results) 可能没有作用，因为您的标记中没有任何类名为 "result" 的元素。

相反，忽略结果并强制刷新图像，如下所示：

function refresh_div() {
    var d = new Date().getTime();
    jQuery.ajax({
        url:'oggi1ora.php?ts=' + d,
        type:'POST',
        success:function(results) {
            $("#oggi1ora").attr("src", "grafici/oggi1ora.png?ts=" + d);
        }
    });
}

更新：如果您希望每隔5秒钟调用/usr/local/bin/oggi1ora.php，则可以通过include '/usr/local/bin/oggi1ora.php'（或根据您的目录结构进行设置）将其包含进来，或者在您的面向web的/var/www/oggi1ora.php脚本中添加exec('php -q /usr/local/bin/oggi1ora.php')。