微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Python Flask获取要显示的json数据

如何解决Python Flask获取要显示的json数据

您的AJAX调用自动检测到JSON响应,但是将其明确告知jQuery不会有什么坏处:

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

contentType参数仅用于 POST 请求,告诉服务器您发送了什么类型的数据。

data对象包含您的Flaskjsonify()响应返回的所有内容在这种情况下,它将是带有BoilerRoom,等键的JavaScript对象。

由于您是通过GET请求加载JSON,因此您最好在此处使用该jQuery.getJSON()方法

$.getJSON(
    $SCRIPT_ROOT + "_status",
    function(data) {
        $('#Result').text(data);
    }
);

这和$.ajax()调用完全一样,但是您可以省略typedataType参数,而urlsuccess参数只是位置元素。

解决方法

我目前正在尝试显示值列表,该值每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 %}

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

解决了!!

新的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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。