スポンサーリンク

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

Flask
スポンサーリンク

今回の記事は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です。

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

Flask
スポンサーリンク
スポンサーリンク

コメント

タイトルとURLをコピーしました