1. ホーム
  2. 質問と答え
  3. PHP/AJAX：ボタンクラスを管理するための自動MySQLクエリ

PHP/AJAX：ボタンクラスを管理するための自動MySQLクエリ

2016-11-14 13 views
0

私はPHPを初めて使いこなしており、ユーザーインターフェイス上で作業しています。 これは、ワット数とブレーカのステータス（ON/OFF）がデータベースに送信されるパーソナルサーキットブレーカプロジェクトです。PHP/AJAX：ボタンクラスを管理するための自動MySQLクエリ

私が今試みているのは、インターフェイスのライブステータスボタンを作ることです。基本的には、ボタンクラス/背景色をデータベースのステータス行に応じて変更します。 （Status = 0→Redステータスボタン、Status = 1→Greenステータスボタン）。

私が助けが必要なのは、2〜3秒ごとにステータス値のデータベースの自動クエリーです。私はmysql/phpを使って読みたい値を問い合わせる方法と、Javascript関数を使ってボタンクラス/背景色を切り替える方法を知っています。

私はAJAXを自動化プロセスに使用しますか？私のアプローチに関する

<!DOCTYPE html> 
<html> 
<head> 
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $(this).toggleClass("off"); 
    }); 
}); 
</script> 
<style> 
div{ 
    float: left; 
    color:#fff; 
    font-size:40px; 
} 

h2{ 
    text-align: center; 
} 

.wrapper{ 
    position: absolute; 
    top: 25%; 
    left: 10%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%); 
} 

.one{ 
    width: 125px; 
    height:100px; 
} 

.two{ 
    width: 120px; 
    height:75px; 
    background:darkblue; 
} 

.three{ 
    width:120px; 
    height:75px; 
    background:blue; 
} 

.button{ 
    background-color: #4CAF50; /* Green */ 
    border: 1px solid green; 
    color: white; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    cursor: pointer; 
    float: left; 
    position: relative; 
    left: 15%; 
} 

.button2{ 
    background-color: #4CAF50; /* Green */ 
    border: 1px solid green; 
    color: white; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    cursor: pointer; 
    float: left; 
    position: relative; 
    left: 15%; 
} 

.off { 
    background: red; 
} 

.button:hover { 
    background-color: #3e8e41; 
} 

.button2:hover { 
    background-color: #3e8e41; 
} 

</head> 
</style> 

<?php 
$query ="SELECT status FROM ICBP.radio3 ORDER BY time DESC LIMIT 1;"; 
$result = mysql_query($query); 
$status = mysql_fetch_row($result); 
if($status = 0){ 
    echo "off"; 
} 
else if ($status = 1) { 
    echo "on"; 
} 

?> 

<body> 
<h2>ICBP Dashboard</h2> 
<div class="wrapper"> 
<div class="one"> 
    <div class="two"> 
    <a href="index3.php"><button class="button">Breaker 1</button></a> 
    <button class="button2">Status</button> 
    </div> 
    <div class="three"> 
    <a href="index3.php"><button class="button">Breaker 2</button></a> 
    <button class="button2">Status</button> 
    </div> 
</div> 

<div class="one"> 
    <div class="two"> 
    <a href="index3.php"><button class="button">Breaker 3</button></a> 
    <button class="<?php echo $status ?>">Status</button> 
    </div> 
    <div class="three"> 
    <a href="index3.php"><button class="button">Breaker 4</button></a> 
    </div> 
</div> 
</div> 
</body> 
</html>

どれ指導が非常に高く評価されています。ここでは、最新のソースであるJSFIDDLE

：ここ

は、私が一緒に遊んでいますモジュールです。

ありがとうございました！

出典

2016-11-14 giri

答えて

0

はい、AJAXリクエストをデータベースに照会し、現在のステータス（PHPタグの間にあるものと同様の内容）を返すPHPスクリプトに送信します。

要求をするsetInterval関数からトリガする必要があります：

が答えに拡大することhttps://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

EDIT ...私はそうのように別々のスクリプトにコードを分割します：

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 

     <link rel="stylesheet" href="styles.css" type="text/css"> 
    </head> 
    <body> 
     <button class="btn-grey">&nbsp;</button> 

     <!-- loading jQuery here as I'm using it within script.js --> 
     <script 
      src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
     crossorigin="anonymous"></script> 
     <script type="text/javascript" src="script.js"></script> 
    </body> 
</html>

styles.css

.btn-green { 
    background-color: green; 
} 

.btn-red { 
    background-color: red; 
} 

.btn-grey { 
    background-color: grey; 
}

status.php（ここでは、コードのニーズバージョンに変更：https://stackoverflow.com/a/5052661/1075071）

<?php 

// perform the query 
// echo out the status depending on the result of the query: 
echo 1;

script.js

// this function is going to be called on page load and then in 5s intervals 
(function worker() { 
    // fire AJAX request to status.php 
    $.ajax({ 
     url: 'status.php', 
     success: function (data) { 
      // process the data received from the PHP script 
      if (data === '1') { 
       $('button').removeClass(); 
       $('button').addClass('btn-green'); 
      } else if (data === '0') { 
       $('button').removeClass(); 
       $('button').addClass('btn-red'); 
      } else { 
       $('button').removeClass(); 
       $('button').addClass('btn-grey'); 
      } 
     }, 
     error: function() { 
      $('button').removeClass(); 
      $('button').addClass('btn-grey'); 
     }, 
     complete: function() { 
      // Schedule the next request when the current one's complete 
      setTimeout(worker, 5000); 
     } 
    }); 
})();

出典

2016-11-14 22:31:02

+0

だから、全体のプロセスは次のようなものになるだろう：AJAX要求 - > php query - >条件に基づいた出力文字列。私はHTMLの本体でPHPスクリプトを呼び出す正しい軌道にいるかどうかを明確にしますか？ありがとうございました。 – giri

+0

@giri私の編集した回答を確認してください - これはアプリ全体の骨組みです。あなたが今行う必要があるのは、PHPスクリプトに必要なロジックを貼り付けることです。 –

関連する問題

 関連する問題