FlaskでJavaScriptに変数を渡す方法。

Flask

2021.01.04

今回の記事はFlaskで読み取ったデータをサーバ側であるFlaskからブラウザのフロント側であるJavaScriptに引き渡す方法をご紹介します。

Flaskプロジェクトに関しては特に難しい内容はないため詳しい解説は省きます。プロジェクト作成方法などは別記事に詳細に解説しているので気になる方は参照リンクから飛んでみてください。

では早速コードのご紹介を行っていきます。

FlaskでJavaScriptに変数を渡す方法

まずはFlaskのファイルで下記のように記述を行います。


from flask import Flask, render_template
from flask import request

app = Flask(__name__)
data = ["2","22"]

@app.route("/index")
def index():
    return render_template("index.html",input_from_python= data) # templatesフォルダ内のindex.htmlを表示する

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

「render_template」の部分で第二引数に指定しているのが引き渡しするデータデータです。

今回は配列です。

次に引き取る方のHTMLファイルを見ていきます。今回のJavaScriptはHTML内に記述します。staticフォルダにjsフォルダを作ってjsファイルとして読み込んでもらってもいいのですが今回の記事ではHTML内記述です。適宜置き換えてください。

<!DOCTYPE html>
<html lang="ja">

    <body>
        <h1 id="output">Hello</h1>
        <button onclick=test_click()>ボタン</button>

        <script>
            function test_click(){
                let list_data = {{ input_from_python | tojson }};
                alert(list_data)
            };
        </script>
    </body>
</html>

templatesフォルダの中にHTMLファイルを入れております。
HTMLにボタンを配置しているだけですがボタンをおすと先ほど、引き渡した変数を「let list_data = {{ input_from_python | tojson }};」部分でJacvaScriptが使用できるJson形式に変形し、その取得したものをalertとして表示させています。「input_from_python」はFlaskの変数引き渡しの時につけたキーの方になるのでそこだけは注意していればOKです。