コンテンツを持つ毎秒HTML要素をMySQLデータベースから更新する

Question

MySQLデータベースのデータに基づいてWebページにdivを設定したいと思います。データベース内のデータが変更されると、div内のコンテンツも同様に変更されます。

例：のは、私がオンラインまたはオフラインであること、サーバーを追跡し、私のMySQLデータベースに「server_statistics」と呼ばれるテーブルの最初の行のフィールドがあるとしましょう。サーバーがオフラインになると、MySQLフィールドは1から0に変わります。オンラインになると、0から1に変わります。

JavaScriptを使用して、Webページのサーバーステータスを表示し、更新せずに更新します。ページ。

私はこのようにそれを行うことができるだろうと考えた：

<script type="text/javascript"> 
    var int = self.setInterval("update()", 1000); 
    function update() { 
     var statusElement = document.getElementById("status"); 
     var status = "<?php 
      $con = mysql_connect("localhost", "root", ""); 
      mysql_select_db("database_name", $con); 
      $row = mysql_fetch_array(mysql_query("SELECT * FROM server_statistics LIMIT 1")); 
      mysql_close($con); 
      echo $row[0]; ?>"; 
     if (status == 0) { 
      statusElement.style.color = "red"; 
      statusElement.innerHTML = "offline"; 
     } 
     else { 
      statusElement.style.color = "green"; 
      statusElement.innerHTML = "online"; 
     } 
    } 
</script> 

しかし、これは動作しません。それが更新すると、私はなぜ...

を知らないためにページをリフレッシュする必要があります私はjQueryのを使用することができます読んだが、私は、このすべての言語の知識がありません。

私はこの試みた：

<script type="text/javascript"> 
    var int = self.setInterval("update()", 1000); 
    function update() { 
     $('#status').load('load.php'); 
    } 
</script> 

をしてからload.phpに私はこれでした：

<?php 
    echo "test"; 
?> 

をしかし、1秒が経過した後、何も起こりませんでした。私が言ったように、私はこのJQuery/AJAXのことについて何も知らないので、おそらく間違っています。

は、どのように私はすべての指定した間隔でMySQLデータベースからフィールドを取得達成することができ、その後に応じて自動的にHTML要素を更新しますか？これは、変更がデータベースに発生した場合にのみHTMLを更新したが、今のところ、私はちょうどそれが数秒ごとまたは数分を変更したい...事前に

のおかげで理想的です。

Answer 1

は、AJAXを利用します。ステータスを確認するたびに、ページがサーバーに要求を出す必要があります。これを行うには2つの方法があります：手動でページを手動でリフレッシュするか、AJAX呼び出しを使用します。

AJAXは本当にあなたがそれに追従して、別のPHPページcheck_status.phpを作成することから始め、すべてのことは難しいことではありません。

<?php 
    $con = mysql_connect("localhost", "root", ""); 
    mysql_select_db("database_name", $con); 
    $row = mysql_fetch_array(mysql_query("SELECT * FROM server_statistics LIMIT 1")); 
    mysql_close($con); 
    echo $row[0]; ?> 

次に、あなたのHTMLページでは、これを実行する最も簡単な方法は次のようになり本当にそれだけです

var statusIntervalId = window.setInterval(update, 1000); 

function update() { 
    $.ajax({ 
     url: 'check_status.php', 
     dataType: 'text', 
     success: function(data) { 
      if (parseInt(data) == 0) { 
       $("#status").css({ color: "red" }).text("offline"); 
      } else { 
       $("#status").css({ color: "green" }).text("online"); 
      } 
     } 
    } 
} 

：jQueryのを使用します。毎秒、AJAX呼び出しを行い、その結果をHTMLに挿入するメソッドupdate()を呼び出します。

Answer 2

の代わりvar int = self.setInterval("update()", 1000);self.setInterval(update, 1000);を使用して試してみて、更新機能の後に配置します。あなたがする必要がどのような