Jquery Python获取要显示的json数据

我目前正试图显示每5秒更新一次到sqlite数据库的值列表

我可以使用以下代码将结果转换为JSON格式：

@app.route('/_status', methods= ['GET',  'POST'])
def get_temps():
    db = get_db()
    cur = db.execute('select sensor_name, temp from cur_temps ORDER BY sensor_name')
    #cur_temps = cur.fetchall()
    return jsonify(cur.fetchall())

通过浏览器导航到网页返回

{
  "BoilerRoom": 26.44, 
  "Cylinder1": 56.81, 
  "Cylinder2": 39.75, 
  "Cylinder3": 33.94
}

我想有这个数据在网页上定期更新，而不加载整个页面再次。我在第一个关卡被卡住了，无法显示实际数据。 我使用的HTML代码是

{% extends "layout.html" %}
{% block body %}
<script type=text/javascript>
  $(function() {
    $("#submitBtn").click(function() {
         $.ajax({
            type: "GET",
            url: $SCRIPT_ROOT + "_status",
            contentType: "application/json; charset=utf-8",
            success: function(data) {
                $('#Result').text(data.value);
            }
        });
    });
  });
</script>

<strong><div id='Result'></div></strong>

{% endblock %}

{%extends“layout.html”%}
{%block body%}
$（函数（）{
$（“#submitBtn”）。单击（函数（）{
$.ajax({
键入：“获取”，
url:$SCRIPT\u ROOT+“\u status”，
contentType:“应用程序/json；字符集=utf-8”，
成功：功能（数据）{
$（'#Result'）.text（data.value）；
}
});
});
});

{%endblock%}

我从示例中选择了代码，但我需要一个指针

解决了

新的HTML代码

<script type=text/javascript>
function get_temps() {
    $.getJSON("_status",
            function (data) {
                $('#Cyl1').text(data.Cylinder1)
                $('#Cyl2').text(data.Cylinder2)
                $('#Cyl3').text(data.Cylinder3)
                $('#BRoom').text(data.BoilerRoom);
            }
    );
}
setInterval('get_temps()', 5000);
</script>

<table id="overview">
    <tr>
        <th>Location</th>
        <th>Temperature</th>
    </tr>
    <tr>
        <td>Cylinder Top</td>
        <td id="Cyl1"></td>
    </tr>
    <tr>
        <td>Cylinder Middle</td>
        <td id="Cyl2"></td>
    </tr>
    <tr>
        <td>Cylinder Bottom</td>
        <td id="Cyl3"></td>
    </tr>
    <tr>
        <td>Boiler Room</td>
        <td id="BRoom"></td>
    </tr>

</table>

函数get_temps（）{
$.getJSON（“\u状态”，
功能（数据）{
$（'#Cyl1'）.text（data.Cylinder1）
$（'#Cyl2'）.text（data.Cylinder2）
$（'#Cyl3'）.text（data.Cylinder3）
$（“#扫帚”）.text（data.BoilerRoom）；
}
);
}
setInterval（'get_temps（）'，5000）；
位置
温度
气缸盖
圆柱中部
缸底
锅炉房

您的AJAX调用应该自动检测JSON响应，但明确地告诉jQuery这一点并没有什么坏处：

$.ajax({
    type: "GET",
    url: $SCRIPT_ROOT + "_status",
    dataType: 'json',
    success: function(data) {
        $('#Result').text(data);
    }
);

contentType

参数仅用于POST请求，告知服务器您发送的数据类型

data

对象包含Flask

jsonify（）返回的响应；在本例中，它将是一个JavaScript对象，带有
样板房
等键

由于您是通过GET请求加载JSON，因此您也可以在此处使用：

这与
$.ajax（）
调用完全相同，但是您可以省略
类型
和
数据类型
参数，而
url
和
成功
参数只是位置元素。
非常感谢Martijn，它现在可以很好地使用自动刷新：）。
$.getJSON(
    $SCRIPT_ROOT + "_status",
    function(data) {
        $('#Result').text(data);
    }
);