Question

凭借我有限的HTML技能，我已经将一大堆代码混合在一起，以完成一项简单的任务。我有一个运行Apache网络服务器的Raspberry Pi。在Pi的监视器上，我需要显示一个图像。偶尔我需要远程更改该图像，最多可能在几十个图像之间切换。

现在，在同一目录中我有图像页面，四个.jpg文件和一个选择器＆＃39;页面选择我想要的图像。我在同一网络上的另一台计算机上将其拉出来。我能想出如何传递我想要的图像的唯一方法是将其写入文本文件。因此，选择器页面有一个简单的Web表单，其中包含一些单选按钮和一个提交按钮。您从1到4中选择一个数字，点击提交，它只是将该数字写入文本文件。那部分有效。

图像页面打开文本文件，读取数字，并将其粘贴到img src标记上。我创建了一个简单的循环，每5秒刷新一次页面，这很好。我可以更改文本文件，几秒钟后页面将重新加载新图像。真棒。

所以我尝试添加一些额外的代码，其中的想法是每5秒检查一次，而不是每5秒刷新一次，以查看文本文件中的数字是否不同。

关于我的代码的东西很简陋，因为我第一次加载它没有任何反应。浏览器加载动画正在进行，所以我假设代码已经开始循环，但是如果它已经到了那么远，为什么它没有首先加载图像？它将一直流行，直到我使用选择器页面来更改文本文件。此时，它将加载图像，但它会加载以前在文本文件中的编号，而不是当前编号。它每次都这样工作，总是改变到以前的数字，而不是当前的数字。

我确定我不明白是因为我的编码技巧很糟糕。有人看到明显的错误吗？

<?php
    $file = fopen("hints.txt","r");
    $theData = fread($file,2);
    fclose($file); 
?>

<img width=533 height=355 src="<?php echo $theData?>.jpg"><br>

<?php
    do{
        sleep(5);   
        $file2 = fopen("hints.txt","r");
        $theData2 = fread($file2,2);
        fclose($file2); 
    } while ($theData == $theData2);
    header("Refresh:0");
?>

Answer 1

回复一些javascript来做，因为我记得只有在将内容放到页面上之前才能使用标题。

<?php echo "<script>window.location.reload();</script>"; ?>

Answer 2

您的PHP代码正在尝试为浏览器生成一个页面，但由于您内部有一个循环，它将挂起，直到数据发生变化

相反，您应该使用javascript ajax请求轮询hints.txt文件并从客户端更新img源。类似的东西：

<!-- load source first time from file with php -->
<img width=533 height=355 id="image" src="<?php echo $theData?>.jpg" />


<script type="javascript">
window.setInterval(function(){
  //create ajax request object, not useful for IE
  var xhttp = new XMLHttpRequest();

  //you may want to change URL to this file
  xhttp.open("GET", "hints.txt", true);

  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      console.log(xhttp.responseText); //see what response was

      //change image attribute
      document.getElementById("image").src = xhttp.responseText + '.jpg';
    }
  };
  xhttp.send();

//update every 5 sec
},5000);
</script>

尝试使用PHP刷新页面时遇到困难

2 个答案: