Question

我一般都是JavaScript和HTML的新手，所以我可能会遇到一些愚蠢的问题......

我使用Flask在Raspberry pi3上显示带有传感器值的图表。传感器通过串行端口连接。我想将我从串口读取的值传递给index.html，这是我拥有图表的javascript代码的模板（用Rgraph制作）。

这是带烧瓶的main.py和端口读数。

from flask import Flask,render_template
import serial

app = Flask(__name__)
ser = serial.Serial('/dev/ttyACM0', 9600)

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

#here I read one value from the serial port
@app.route('/getdata')
def test():
    return ser.readline()

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

我尝试使用的index.html模板是here（在github上）。 javascript生成一些随机数（从第66行到第72行），但我希望它能从页面中读取一个数字＆＃39; / getdata＆＃39;而是在数据数组中推送。

我考虑使用GET-POST方法，但它变得非常复杂。也许有一个更简单的解决方案？或者，也许（但我认为这是不可能的），我可以直接从javascript读取串口？或者，也许，我做错了什么，我需要把所有东西扔出窗外？

Answer 1

一旦烧瓶呈现模板，您就无法做到。它并不真正支持推送请求（至少不是我能说的）但是做一个Ajax请求并不难

ajax_params = {
        url: '/getdata',
        type: 'GET',
        cache: false,
        dataType: 'json',
        error: function(jqXHR, status, error) {
            console.log("Ajax error " + error);
            console.log("status " + status);
            console.log(jqXHR);
        },
        success: datacb
    };

function datacb (resp, status, jqXHR) {
     /* update code here */
     console.log(resp);

     /* you may want to sleep here */

     $.ajax(ajax_params);
}

$.ajax(ajax_params);

Answer 2

除非您想在不重新加载index.html页面的情况下更新数据，否则您可能会尝试以下内容：

from flask import Flask,render_template
import serial

app = Flask(__name__)
ser = serial.Serial('/dev/ttyACM0', 9600)

@app.route('/')
def hello_world():
    servalue = test();
    return render_template("index.html", value=servalue)

#here I read one value from the serial port
@app.route('/getdata')
def test():
    return ser.readline()

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

如果你想在不重新加载索引页面的情况下更新数据，你可能不得不像@debhand建议的那样使用AJAX。

在javascript中从页面读取值

2 个答案: