flask + jQueryでajax通信してみた。

ここ数日、flaskしか書いてない。

今回は、jQueryでflaskに対してpostを投げて、帰ってきた結果を画面上に表示させるということをやってみます。
一応、ajax通信です。

コード全体は、ここにおいてます。

github.com

動作としては、

画面上のボタンを押して、flaskに対してpostリクエストを投げる
flaskがpostリクエストに対して結果を返却
結果を受け取って画面上のspanタグに書き込み

という流れになります。

1. scriptの設定

htmlのbodyにボタンを配置して、押された時の動作をscriptに書きます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function() {
    $('#send').click(function() {
        $('#result').text("");

        $.ajax({
            type: "POST",
            url: '/post',
            dataType: 'json',
            processData : false,
            contentType : false,
            success: function(result) {
                console.dir(result);
                $('#result').text(result.message);
            },
            error: function() {
                console.dir("error");
            }
        });
    });
});
</script>

上はjQueryのインポート。下がボタンをおした時の動作。
ボタンには#sendをidとして設定しているので、click()としてクリックされた時の動作を設定します。はじめにspanタグ内の文字列を念のため消しておきます。
その後はajax通信をするための設定です。postを投げたいので「type: "POST"」とします。送り先は「url: '/post'」です。このurlはflaskの中のルートの設定で決まります。通信の結果はjsonを送るので「dataType: 'json'」。 processDataとcontentTypeについては今回は使用しないのでfalseに。「success / error」は通信が正常に終了したかどうかです。どちらもとりあえずコンソールログに出力しておいて、通信が成功した時だけ、結果を画面上に表示させます。

この辺りはajaxをするときの設定なので、flask関係ないです。

2. flaskの設定

といっても、flaskとしては正しくルートを設定しておいて結果を返却するだけ。
今回はjsonで結果を返すようにしたかったので、該当のメソッドの実装は

@app.route('/post', methods=['POST'])
def post():
    return json.dumps({"message" : "通信成功!!"})

としました。普通だな！！

以上で完成です。
あとはpython app.pyとしてサーバーを起動、ブラウザからアクセスして動作確認してみましょう。