从javascript中的页面读取值

Question

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

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

这是带有flask和端口读数的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模板在这里 （在github上）。 JavaScript会生成一些随机数（从66行到72行），但是我希望它从页面“ / getdata”中读取一个数字，然后将其推送到数据数组中。

我曾考虑过使用GET-POST方法，但是它变得相当复杂。 也许有一个更简单的解决方案？ 或者，也许（但我认为这是不可能的），我可以直接从javascript中读取串行端口吗？ 或者， 也许 ，我做错了所有事情，需要将所有东西扔出窗外吗？

Answer 1

flask渲染模板后，您将无能为力。 它实际上并不支持推送请求（至少据我所知），但是执行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()

如果要更新数据而不重新加载索引页，则可能必须使用AJAX，如@debhand所建议。