Question

我正在尝试制作一个Web应用程序，该应用程序从通过计算机的传感器获取温度和（电机）RPM，这些传感器与机械串行连接并显示在网页上。

我正在将Python Flask与AJAX结合使用。我到目前为止已经尝试过的是从后端获取jsonify数据并显示在html页面上。但是，如果不重新加载页面，我不会在网页上看到或看到任何实时数据更改。我每次都需要重新加载页面以查看数据更改。

我该如何以及将这些数据显示在网页上的可能方法是什么。

这是我的烧瓶应用程序的python脚本：

from flask import Flask, render_template, request, jsonify
import random
import time
import serial


app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template("index.html")


@app.route('/ret_num', methods = ['POST', 'GET'])
def ret_num():
    s = serial.Serial('COM7')
    res = s.read()
    time.sleep(1)
    return jsonify(res) 

if __name__ == '__main__':
    app.run(debug = True)

和HTML代码：

<html>
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<script>
$(function(){
    $.ajax({
        url: '/ret_num',
        type: 'POST',
        success: function(response) {
            console.log(response);
            $("#num").html(response);
        },
        error: function(error) {
            console.log(error);
        }
    });
});
</script>
<h1>Output</h1>
<h1 id="num"></h1>
</body>
</head>
</html>

Answer 1

有两种不错的方法：

投票本质上，您必须在很小的时间间隔（例如30秒）内循环调用API。可以使用类似的方法（代码可能无法按原样工作，但原理仍然相同）来实现：

    setInterval($.ajax({
        url: '/ret_num',
        type: 'POST',
        success: function(response) {
            console.log(response);
            $("#num").html(response);
        },
        error: function(error) {
            console.log(error);
        }
    }), 30000);

使用WebSocket代替普通的AJAX调用。阅读文档here。
（奖励）您可以间隔时间重新加载页面。例如，每30秒重新加载一次：

    setInterval( location.reload(), 30000);

使用python在网页上显示实时传感器数据的可能方法

1 个答案: