基于来自 Flask 的 AJAX 调用更新 HTML 页面上 LED 的颜色答案

【问题标题】：Update the color of a LED on HTML page based on AJAX call from Flask基于来自 Flask 的 AJAX 调用更新 HTML 页面上 LED 的颜色
【发布时间】：2021-09-07 22:51:30
【问题描述】：

我是网络软件编程的新手，在我的 Flask 页面上如何更新 LED indicators 时遇到问题。

我正在使用 AJAX 调用将我的 python 变量的值获取到我的 HTML。我想知道是否有可能在 AJAX 调用中访问 system_mode 并将其放在 current_mode 位置的 if 语句中。

我知道我可以通过

mode = "startup"
@app.route('/update', methods = ['POST'])
def update():
  return jsonify({
    'system_mode': mode,
  })

一个 LED 的 CSS 代码：

.led-green {
    background-color: #94E185;
    box-shadow: 0px 0px 4px 1px #94E185;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    margin-left: 10px;
    border: 1px solid #78D965;
    border-radius: 20px;
}
    
.led-gray {
    background-color: #c4c4c4;
    box-shadow: 0px 0px 4px 1px #bdbdbd;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    margin-left: 10px;
    border: 1px solid #adadad;
    border-radius: 20px;
}

HTML 代码：

!doctype html>
<html>

<head>
  <!-- Bootstrap CSS -->
  <link 
    rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
    crossorigin="anonymous"
  >
  <!-- Your file css -->
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='index.css') }}" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <script>
    setInterval(function() {
      $.ajax({
        url: '/update',
        type: 'POST',
        success: function(response) {
          console.log(response);
          $("#system_mode").html(response["system_mode"]);
        },
        error: function(error) {
          console.log(error);
        }
      })
    }, 2000);
  </script>
  <div class="container my-5">
    <div class="row">
      <div class="col-sm-6 text-center my-3">
        <h3>Status</h3>
        <div class="row text-left my-3">
          <div class="col">Startup</div>
          <div class="col text-right">
            {% if current_mode == "startup" %}
              <div class="led-green"></div>
            {% else %}
              <div class="led-gray"></div>
            {% endif %}
          </div>
        </div>
        <div class="row text-left my-3">
          <div class="col">Ready</div>
          <div class="col text-right">
            {% if current_mode == "ready" %}
              <div class="led-green"></div>
            {% else %}
              <div class="led-gray"></div>
            {% endif %}
          </div>
        </div>
        <div class="row text-left my-3">
          <div class="col">Warning</div>
          <div class="col text-right">
            {% if current_mode == "warning" %}
              <div class="led-green"></div>
            {% else %}
              <div class="led-gray"></div>
            {% endif %}
          </div>
        </div>
        <div class="row text-left my-3">
          <div class="col">Shutdown</div>
          <div class="col text-right">
            {% if current_mode == "shutdown" %}
              <div class="led-green"></div>
            {% else %}
              <div class="led-gray"></div>
            {% endif %}
          </div>
        </div>
        <div class="row text-left my-3">
          <div class="col">Sleeping</div>
          <div class="col text-right">
            {% if current_mode == "sleeping" %}
              <div class="led-green"></div>
            {% else %}
              <div class="led-gray"></div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

感谢您的帮助！ :)

【问题讨论】：

嗨，你能显示更多的html代码吗？此外，您的服务器将返回状态，即：startup..etc 并且在前端您只需将 div 更改为绿色或灰色？
嘿！我添加了整个相关的 html 代码并将 if 语句修复为 current_mode == startup.. 等。是的，状态正在 python 代码中更新。在前端，我想将 LED 类从灰色更新为绿色，然后再返回。这样用户就可以看到，此刻的状态是什么。
欢迎来到 Stack Overflow！请不要将解决方案公告编辑到问题中。接受（即单击旁边的“勾号”）现有答案之一，如果有的话。如果现有答案尚未涵盖您的解决方案，您还可以创建自己的答案，甚至接受它。

标签： python html ajax flask

【解决方案1】：

又快又脏的方法（需要指定html elem的id）：

<div class="container my-5">
   <div class="row">
      <div class="col-sm-6 text-center my-3">
         <h3>Status</h3>
         <div class="row text-left my-3">
            <div class="col">Startup</div>
            <div class="col text-right">
               {% if current_mode == "startup" %}
               <div id="startup_id" class="led-green"></div>
               {% else %}
               <div id="startup_id" class="led-gray"></div>
               {% endif %}
            </div>
         </div>
         <div class="row text-left my-3">
            <div class="col">Ready</div>
            <div class="col text-right">
               {% if current_mode == "ready" %}
               <div id="ready_id" class="led-green"></div>
               {% else %}
               <div id="ready_id" class="led-gray"></div>
               {% endif %}
            </div>
         </div>
         <!-- continue -->
      </div>
   </div>
</div>

<script>
   setInterval(function(){
     $.ajax({
       url: '/update',
       type: 'POST',
       success: function(response) {
           //parse your response to understand which html elements should be updated
           system_mode = response["system_mode"];
           //clear all html elem class with:
           $("#startup_id").removeClass('led-green');
           $("#startup_id").addClass('led-gray');
           $("#ready_id").removeClass('led-green');
           $("#ready_id").addClass('led-gray');
           //continue...
           if (system_mode  == "startup") {
               $("#startup_id").addClass('led-green');
           } else if (system_mode  == "ready"){
               $("#ready_id").addClass('led-green');
          } //continue...

       },
       error: function(error) {
           console.log(error);
       }
   })}, 2000);
</script>
{% if current_mode %}
<div class="led-green"></div>
{% else %}
<div class="led-gray"></div>
{% endif %}

【讨论】：

谢谢！ :) 这个解决方案有效，我只需要添加 removeClass();在 if 语句之前，然后每个条件一个，以便能够从灰色变为绿色。