【Javascript to flask】FormDataを送信/受信する方法 【お家IT#6】

本件の実装の一部 
motojapan.hateblo.jp

前回の続き 
motojapan.hateblo.jp

目次 

前回まででWebカメラで撮影した画像をCanvas領域にコピーするところまで終えた。
が、根本的にJavascript - python(flask)環境でのフロントエンド-バックエンド間通信について知識がないので手軽にサーバーに対してデータ送信する方法をメモ。

今回は簡単な文字列"hogehoge"と"fugafuga"を送受信する例。

送信側実装(Javascript)

「FormDataというデータコンテナ」と「Ajaxによる非同期通信」を利用して送信する方法が一番簡単に試せる。
JavascriptのFormDataは、append(,)することで追加し続けられる。

#ajax用モジュール読み込み
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    ...

    function send_text(){
        var text1 = 'hogehoge'
        var text2 = 'fugafuga'

        #FormData初期化
        var fData = new FormData();

        fData.append('text1', text1);
        fData.append('text2', text2);

        #ajax送信
        $.ajax({
            //配信元のhttpsサーバーに返す場合
            url: '/register',                            
            //別サーバー（今回でいう画像処理サーバー）に返す場合
            //url: 'https://192.168.0.100:12345/register',   
            type: 'POST',
            data: fData ,
            contentType: false,
            processData: false,
            success: function(data, dataType) {
                //非同期で通信成功時に読み出される [200 OK 時]
                console.log('Success', data);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                //非同期で通信失敗時に読み出される
                console.log('Error : ' + errorThrown);
            }
        });
    }
    ...
</script>

受信側実装(python : flask)

Flaskのrequest.formは、でアクセスする。
前回のスクリプトの差分で必要箇所を記載(非常に簡単)

from flask import Flask, render_template, request

...
#前回に追記
@app.route('/register', methods=['POST'])
def set_data():
    text1 = request.form['text1']
    text2 = request.form['text2']

...

対応関係

下記に対応関係を簡単にまとめる。

	javascript	python:flask
Formデータ	var fData = new FormData();	request.form
Formデータ読み書き	[Write] fData.append('text1','hogehoge');	[Read] request.form['text1']

以上。
これでデータの登録などの単純なやり取りができる。

次回はbase64を送受信する話。