【Flask】JQueryでAjax通信をする手順。〜 JavaScript初心者向け〜

今回の記事はFlaskでJQueryを用いてAjax通信をする手順に関してまとめたものです。

私のステータスとして、JavaScript初心者でWebのフロント側の開発を行ったことはありませんでした。そのため私の苦労した点など踏まえて初心者用にAjax通信をFlaskで実装する方法を紹介していきます。

先に言っておきますが、Ajaxが何かに関しては別サイトを見た方がわかりやすいと思いますのでこちらなどをご参照ください。

ではまずはFlaskプロジェクトを作成していきましょう。

Flaskプロジェクトの作り方手順
FlaskでJQueryを使用する手順
FlaskでJQueryを用いてAjax通信をする手順

Flaskプロジェクトの作り方手順

まずは基本的なFlaskのプロジェクトを作成していきます。

まずはPythonを扱う上での環境構築を行っていきましょう。環境はDockerでもローカルでもなんでもそこまでの差異はありません。この記事ではローカル環境（私のPC OSはMacです。）で作成していきます。

まずはどこでも良いのでフォルダを作りましょう。ターミナルを開いて下記を実行していきます。

私はdesktopにフォルダを作りました。
cd Desktop
mkdir flask_test
cd flask_test

pythonの仮想環境作成
python3 -m vena env
source env/bin/activate

仮想環境に入る

pip install flask

上記でFlaskを仮想環境にインストールできました。次にプロジェクトのテンプレートを記述、配置していきます。

touch app.py
「app.py」にPythonコードを書いていきます。
mkdir templates
cd templates

touch index.html

ここまで作成すれば後はVSCodeでフォルダを開いてみましょう。

下記のようなフォルダ構成になっています。

次にindex.htmlを開くコードを記載していきます。

<h1>Hello</h1>

from flask import Flask, render_template
app = Flask(__name__)

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

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

簡単に季節を行っていきます。

Flaskのプロジェクトはこのapp.py内の関数でこのファイルが保存している端末にローカルサーバを立てることができます。ローカルサーバとは簡単に書くと、自身の端末をWebサーバのようにあつかうことです。つまり、「render」によってサーバにアクセスし、htmlを表示してくれというやり取りをとることができます。

今回でいうと、「render_template」で「templates」フォルダのルート「index」とついているHTMLファイルを表示してくださいという指示を出しています。

ではかくにんしてみましょう。Terminalで下記を実行です。

python app.py

また、その際にURLはローカルホストの「http://127.0.0.1:5000」に「上記の@app.route(“/index”)」の「/index」のフォルダ階層を足した「http://127.0.0.1:5000/index」にアクセスすることで下記のようにページを表示することができます。

ここまでできればFlaskプロジェクトは作成できたということにしておきます。

FlaskでJQueryを使用する手順

次にFlaskでJQueryを使用できるように設定していきます。
JQueryを使用する方法としては「JQueryのファイルを直接プロジェクトの階層に突っ込む」か「WebからJQueryのファイルを読み込んで使用するか」の2種類があるようです。他にもあるかもしれませんがまずはこの2種類。

今回はより多くの記事で採用されているWebからの読み込みの場合で検証してみます。

<!DOCTYPE html>
<html lang="ja">
    <body>
        <h1 id="output">Hello</h1>
        <button onclick=test_click()>ボタン</button>
        <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
        <script>
            function test_click(){
                $("#output").html("<b>JQuery使用成功</b>");
            };
        </script>
    </body>
</html>

「index.html」内にJavaScriptを組み込みました。

現在のページは下記のようになっております。

このボタンをクリックするとJQueryが作動するという仕組みです。

上記のHTMLファイルのJQuery部分を解説していきます。

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    function test_click(){
       　$("#output").html("<b>JQuery使用成功</b>");
    };
</script>

まずWebのJQueryを読み込んでいるのが第1文目です。
その次がjavascriptの関数の「test_click()」という自作の関数を作成しています。

この関数内の「＄」マークがついている場所がJQueryの部分です。HTMLに直接出力できるJQuery関数です。ボタンをクリックすると下記のようにページ内の文字が変わっていればOKです。

FlaskでJQueryを用いてAjax通信をする手順

次にこの記事のメインにあたるAjax通信を行っていきます。

補足です。（今までローカルサーバにアクセスしてページを表示させていた通信の名前が「http通信」という名前です。）

Ajax通信はこのHTTP通信ににていますがHTTP通信がブラウザからWebサーバにこのHTMLを見せてと依頼するのと違い、JavaScriptがWebサーバに対してこのHTMLなどを見せてと依頼するJavaScriptによる処理という点が違います。

つまりはブラウザではなくJavaScriptが直接サーバに指令出しているということが大きな違いなので今回は「Ajax通信でサーバ側（Flask）にデータ(jsonData)を送信。」→「Webサーバ（Flask）からデータをコンソール（Terminal）に出力」＆「ブラウザのJavaScriptコンソールにjsonデータ出力」を行います。

では先ほどの「index.html」にボタンを追加と非同期通信の処理を追加します。

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

    <body>
        <h1 id="output">Hello</h1>
        <button onclick=test_click()>ボタン</button>
        <button onclick=test_ajax()>Ajax</button>
        <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
        <script>
            function test_click(){
                $("#output").html("<b>JQuery使用成功</b>");
            };
            function test_ajax(){
                data = {"hoge": "fuga"};
                json = JSON.stringify(data);  // object型からJSON文字列(string型)に変換
                $.ajax({
                    type: "POST",
                    url: "/test",
                    data: json,
                    contentType: "application/json",
                    success: function(msg) {
                        console.log(msg);
                    },
                    error: function(msg) {
                        console.log("error");
                    }
                });
            }
        </script>
    </body>
</html>

一部解説を行います。変わっているところはボタンを追加した点と「$.ajax」以下のAjax通信の処理を含む関数「test_ajax」を追加した点です。

今回のボタンクリックは「POST」というタイプでのデータのやり取り方法です。これ以外に「GET」というデータのやり取り方法もありますが今回は「POST」で行います。
次にURLですがここはサーバ側のどの処理を行うかという指定をしている箇所になります。この場合だとローカルサーバの「http://127.0.0.1:5000/test」というフォルダに対して通信をするのでサーバ側ではこのURLに飛んできた際の処理を書いておけば正常に作動するという仕組みです。（＊後ほどサーバ側で補足説明します。）
次にやり取りするデータの形式とコンテンツタイプを2行で指定し、最後に「Success」「error」で処理が成功した時と失敗した時とでの処理を分けます。

では次にサーバ側にあたるFlaskのPythonファイル「app.py」に非同期通信で行われる処理を記載します。

from flask import Flask, render_template
from flask import request

app = Flask(__name__)

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

@app.route('/test', methods=['POST'])
def test():
    if request.method == 'POST':
        data = request.json
        print(data)
    return data


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

先ほどから追加した点は「from flask import request」でURLにリクエストを渡すモジュールをインポートしている点とAjax通信があった際に行う処理部分を追加しています。

「@app.route(‘/test’,〜)」の記述で「http://127.0.0.1:5000/test」のURLにAjax通信があった際に割り当てられる処理を記述しており、if文でもしその通信がPOSTの場合jsonを返すという処理です。またprint関数はサーバのコンソールに値を出力できるのでサーバにデータが出力されているかの確認を行えます。

では確認してみましょう。まずは「http://127.0.0.1:5000/index」にアクセスし、Ajaxボタンをクリックします。すると見た目は何も変化がないように見えますがTerminalを見てください。

   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [17/Dec/2020 23:01:07] "POST /test HTTP/1.1" 200 -
{'hoge': 'fuga'}

「{‘hoge’: ‘fuga’}」という形式のJsonがコンソールに出力できています。これはAjax通信によりJavaScriptからWebサーバに指示がうまく通っているということです。

次にブラウザのコンソールでもJavaScript側のコンソールを確認しておきましょう。

Safariのコンソール画面はメニューの「開発」→「JavaScriptコンソールを見る」から確認できます。

今回の記事は以上です。Ajax通信の仕組みが分かりましたでしょうか。基本はFlaskに限らず全てのサーバサード側言語とのAjax通信はこのような仕組みで動いています。

【Flask】Python(Flask)でcsv読み込みを行いHTMLに表示させる手順。より:

2020年12月20日 2:28 PM

[…] 今回の記事はPythpn(Flask)でcsvを読み込みHTMLに表示する流れをご紹介していきます。まずは、Flaskプロジェクトを作る必要がありますがそちらに関しては過去記事リンクから行ってみてください。（参照リンク） […]

返信
FlaskでJavaScriptに変数を渡す方法。より:

2021年1月4日 10:29 PM

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

返信