Python Flask + AJAX 如何在不重新加载页面的情况下更新 div 变量

Question

我有这个例子，我想看看我的数据库中是否有记录，看看我的<div class="container-fluid"> 中的这个触发变量是真还是假。我知道我可以很好地发布页面，但我想知道你是否可以告诉我如何让 AJAX 不断检查它是否已被触发并更改该 div 内的变量 Triggered 而无需刷新任何其他内容。

HTML

**<div class="container-fluid" id="trigger-container">**
      <h1>Incubator Controller</h1>
        <div class="col-sm-4" style="background-color:lavender;"> 
          {% if Triggered == "True" %}
            <span class="badge badge-pill badge-success">ALL CLEAR</span>
          {% else %}
            <span class="badge badge-pill badge-danger">PROXIMITY ALERT</span>
          {% endif %}
        </div>

python烧瓶侧看起来像这样：

@app.route('/update', methods=['POST','GET'])
def Updater():
        Node = DAO.Pull_Node_Status(NodeID)
        Triggered= Node.Triggered[0]
        return render_template('Controller.html',Triggered=Triggered)

我知道我需要使用 setInterval 来调用 javascript 函数。但我很难将它们拼凑在一起。这是我能想到的最简单的例子。我希望能够不断更新多个内容，而不会刷新页面并丢失所有内容。

HTML 脚本部分

<script>
    function UPDATETriggerDiv() { 
        $.get('/updateTrigger', 
            function(data){
                const parsed = JSON.parse(data)
                something to do here with (parsed.Triggered);
                g2.refresh(parsed.currentHumidity);
            };
        )
    };

    setInterval(function () {
            UPDATETriggerDiv();
            return false;
    }, 2500);
</script>

任何帮助将不胜感激！

Answer 1

如果 parsed.Triggered 是布尔值，那么您可以使用 if/else 语句设置孵化器控制器。

var html = '<span class="badge badge-pill ';
if (parsed.Triggered){
    html += 'badge-success">ALL CLEAR</span>';
}
else{
    html += 'badge-danger">PROXIMITY ALERT</span>';
}
$("#trigger-container h1 + div").html(html);