【flask to Javascript】jsonデータを送信/受信する方法(jsonify) 【お家IT#9】

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

前回の続き 
motojapan.hateblo.jp

目次 

前回までで、javascript->flaskへbase64を送信した。
これを画像処理して、その結果を返信するときjsonだと汎用性も高い。
なのでjsonデータの返信方法をメモ。

送信側実装 (python:flask)

flaskのjsonifyを使うと簡単。

from flask import Flask, request, abort, make_response, current_app, jsonify

...
@app.route('/hoge_image_processing', methods=['POST'])
@crossdomain(origin='*')
def image_processing():

    ...

    res = {
        'ip_type' : 'OCR',           # 画像処理タイプ
        'result'  : 'hogehoge',      # 画像結果
        'prefix'  : '201701011200'   # 時刻プレフィクス
    }    
    
    return jsonify(ResultSet=res)
...

受信側実装 (javascript)

いままでの続きに追記です。
重複部分はある程度省略。

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

    function send_img(){
        ...

        #ajax送信
        $.ajax({
            //画像処理サーバーに返す場合
            url: 'https://192.168.0.100:12345/hoge_image_processing',   
            type: 'POST',
            data: fData ,
            contentType: false,
            processData: false,
            success: function(data, dataType) {
                //非同期で通信成功時に読み出される [200 OK 時]
                //console.log('Success', data);
                if (data.ResultSet.ip_type == 'OCR') {
                    var res    = data.ResultSet.result; // 'hogehoge'
                    var prefix = data.ResultSet.prefix; // '201701011200'

                }

            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                //非同期で通信失敗時に読み出される
                console.log('Error : ' + errorThrown);
            }
        });
    }
    ...
</script>

以上。

ここまでの4回の投稿でバックエンドとフロントエンドの通信周りは整理されたので、次回からはWebカメラの操作（反転、カメラ切り替え、サイズ変化検出）を進める。