從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所建議。