douliao8402 2016-11-14 21:50
浏览 41
已采纳

PHP / AJAX：自动MySQL查询来管理按钮类[重复]

This question already has an answer here:

I am very new to PHP and working on a user interface. This is for a personal circuit breaker project where wattage and breaker status (ON/OFF) is sent to a database.

What I'm attempting now is to make a live status button for the interface. Essentially, I want the button class/background color to change according to the status row in the database. (Status = 0 --> Red status button, Status = 1 --> Green status button).

What I need help with is the automatic query of the database for the status value every 2-3 seconds. I know how to query for the value I want to read using mysql/php and how to toggle the button class/background color using a Javascript function.

Should I be using AJAX for is automation process?

Here is the module I am playing with: JSFIDDLE

Here is the most recent source:

<!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>

Any guidance regarding my approach is very appreciated.

Thank you!

</div>
  • 写回答

1条回答 默认 最新

  • dsfdfdfd6576578 2016-11-14 22:31
    关注

    Yes, I would fire an AJAX request to a PHP script that queries the database and returns the current status (with contents similar to what you've got there between your PHP tags).

    The request would need to be triggered from setInterval function: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

    EDIT

    To expand on the answer... I would divide the code into separate scripts like so:

    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

    <?php

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

    script.js (modified to your needs version of the code here: https://stackoverflow.com/a/5052661/1075071)

    // 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);
        }
    });
})();
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 如何在scanpy上做差异基因和通路富集？
  • ¥20 关于#硬件工程#的问题，请各位专家解答！
  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？
  • ¥15 c++头文件不能识别CDialog