難易度PHPでページを更新しようとしています

Question

制限されたHTMLスキルを使って、簡単な作業を達成するためのコードをまとめました。私は、Apache Webサーバーを実行しているRaspberry Piを持っています。 Piのモニターでは、私は画像を表示する必要があります。場合によっては、その画像を遠隔で変更する必要があります。たいていの場合、数十枚の画像を切り替える必要があります。

私は画像ページと4つの.jpgファイルと、私が望む画像を選択するための「選択」ページを持っています。私は同じネットワーク上の別のコンピュータでこれをプルしています。私が望むイメージをどのように渡すかを理解できる唯一の方法は、それをテキストファイルに書き込むことでした。したがって、セレクタページには、いくつかのラジオボタンと送信ボタンがある単純なWebフォームがあります。あなたは1から4の数字を選んで、submitを押すだけで、その番号をテキストファイルに書き込むだけです。その部分は機能する。

イメージページはテキストファイルを開き、番号を読み取ってimg srcタグに貼り付けます。私は5秒ごとにページをリフレッシュする単純なループを作って、うまくいきました。私はテキストファイルを変更することができ、数秒後にページは新しいイメージでリロードされます。驚くばかり。

5秒ごとに更新するのではなく、テキストファイル内の数字が異なるかどうかを5秒ごとに確認するというアイディアを追加しました。

私が最初に読み込んでも何も起こらないので、私のコードについては何かjankyです。ブラウザの読み込みアニメーションは進行しているので、コードがループを開始していると仮定しますが、これまでのところ、最初に画像をロードしなかったのはなぜですか？それは、私がchooserページを使ってテキストファイルを変更するまで続きます。その時点で、イメージはロードされますが、現在のテキストファイルではなく、以前にテキストファイルにロードされていた番号がロードされます。これは毎回このように機能し、常に現在の番号ではなく前の番号に変更されます。

私は、私のコーディングスキルが吸うので、私が理解していない何か馬鹿だと確信しています。誰でも目障りなエラーが表示されますか？私は、コンテンツがページ上に置かれる前に、ヘッダのみを使用することができますリコールとして

<?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とhints.txtファイルをポーリングする必要がありますajaxはクライアント側から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>