Python Flask获取json数据显示 [英] Python Flask get json data to display

问题描述

我正在尝试显示每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（）
返回jsonify（cur.fetchall（））
  

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

  {
BoilerRoom：26.44，
Cylinder1：56.81， 
Cylinder2：39.75，
Cylinder3：33.94 
} 
  

我希望定期在网页上更新这些数据，而不必重新加载整个页面。我遇到第一个障碍，不能得到实际的数据显示。
我使用的HTML代码是

  {％extendslayout.html％} 
 {％block body％} 
< script type = text / javascript>点击（函数（）{
 $ .ajax（{
类型：GET，$ b $（$ {
 $（＃submitBtn b 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> 
函数get_temps（）{
 $ .getJSON（_ status，
函数（data）{
 $（'＃Cyl1'）.text（data.Cylinder1）$ b text（data.Cylinder2）$ b $（'＃Cyl3'）。text（data.Cylinder3）$ b $（'＃BRoom'）。text（data。 BoilerRoom）; 
} 
）; 
} 
 setInterval（'get_temps（）'，5000）; 
< / script> 
 
< table id =overview> 
< tr> 
< th>位置< / th> 
 th温度< / th> 
< / tr> 
< tr> 
< td>圆筒顶部< / td> 
< td id =Cyl1>< / td> 
< / tr> 
< tr> 
< td>圆筒中间< / td> 
< td id =Cyl2>< / td> 
< / tr> 
< tr> 
< td>圆筒底部< / td> 
< td id =Cyl3>< / td> 
< / tr> 
< tr> 
< td>锅炉房< / td> 
< td id =BRoom>< / td> 
< / tr> 
 
< / table> 
  

解决方案您的AJAX调用应该会自动检测JSON响应，但是明确地告诉jQuery它并没有什么坏处：

$ $ $ ajax（{
type：GET ，
url：$ SCRIPT_ROOT +_status，
dataType：'json'，
成功：函数（数据）{
$（'＃Result'）。text数据）;
}
）;

contentType 参数仅用于 请求，告诉服务器你发送了什么类型的数据。
$ b $ data 对象包含任何你的Flask jsonify（）返回的响应;在这种情况下，它将是一个带有 BoilerRoom 等键的JavaScript对象。

JSON在GET请求上，你可以使用 jQuery.getJSON（）方法：

  $。getJSON（
 $ SCRIPT_ROOT +_status ，
函数（数据）{
 $（'＃Result'）.text（data）; 
} 
）; 
  

这与 $。ajax（） call，但你可以省略类型和 dataType 参数，而 url 和 success 参数只是位置元素。

I'm currently trying to display a list of values that get updated every 5 seconds to a sqlite database.

I can manage to convert the results to a JSON format by using the following code:

@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())

Navigating to the webpage through a browser returns

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

I would like to have this data updated on a webpage periodically without loading the whole page again. I'm getting stuck at the first hurdle and cant get the actual data to display. The HTML code I'm using is

{% 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 %}

I've picked code from examples but I'm in need of a pointer.

SOLVED!!

New HTML Code

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

解决方案

Your AJAX call should auto-detect a JSON response, but it won't hurt to explicitly tell jQuery about it:

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

The contentType parameter is only used for a POST request, telling the server what type of data you sent.

The data object contains whatever your Flask jsonify() response returned; in this case it'll be a JavaScript Object with the BoilerRoom, etc. keys.

Since you are loading JSON over a GET request, you may as well use the jQuery.getJSON() method here:

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

This does exactly the same as the $.ajax() call but you get to omit the type and dataType parameters, and the url and success parameters are just positional elements.

这篇关于Python Flask获取json数据显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！