ディレクトリ構成

毎度おなじみのディレクトリ構成

.
├── ajax.py
└── templates
    └── ajax.html

ajax.html(htmlファイル)

ブロックごとに解説するため、２つに分ける。

contentブロック

先頭からcontentブロックまでを示す。

{% extends "bootstrap/base.html" %}

{% block title %}Hello{% endblock title %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>Hello World!</h1>
        <label for="name">name：</label>
        <input id="name" type="text" size="20" />
        <button id="btn">send</button>
    </div>
</div>
{% endblock content %}

contentブロックに「label」と「input」を追加。 inputには"name"というidを振っている。

今回これらはformタグでくくっていない。

scriptsブロック

「{{ super() }}」は忘れずに。

{% block scripts %}
{{ super() }}
<script>
$(function() {
  $('#btn').click(function() {
    var textData = JSON.stringify({"name":$('#name').val()});

    $.ajax({
      url: '{{ url_for('getData') }}',
      data: textData,
      contentType: 'application/json;charset=UTF-8',
      type: 'POST'
    }).done(function(data){
      console.log(data);
    }).fail(function(){
      console.log('fail');
    });
  })
});
</script>
{% endblock scripts %}

ボタンをクリックすると、テキストの内容を取得し、JSON文字列を作成する。 ajaxオブジェクトで、サーバにJSONをPOSTする。

ajaxオブジェクトに設定した値を次に示す。

設定	値	概要
url	{{ url_for(getData') }}'	/getDataへアクセス
data	textData	送信データ
contentType	application/json;charset=UTF-8	JSONによるデータ受け渡し
type	POST	HTTPメソッド

contentTypeを忘れると、python側で「request.json」でデータにアクセスできなくなるので注意。

処理が成功すると「.done()」が実行され、失敗すると「.fail()」が実行される。

always(おまけ)

どちらの場合でも実行したい処理がある場合は、次のように「.always()」を記述するよい。

    $.ajax({
      data: textData,
      contentType: 'application/json;charset=UTF-8',
      type: 'POST'
    }).done(function(data){

    }).fail(function(){

    }).always(function({
        // ここに処理を記述
    }));

ajax.py

# coding: utf-8
from flask import Flask, render_template, request, jsonify
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)


@app.route('/')
def index():
    return render_template('ajax.html')


@app.route('/getData', methods=['POST'])
def getData():
    name = request.json['name']
    print name
    return jsonify({'result': 'ok', 'value': name})


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

/getDataにポストされたデータを処理する。

「name = request.json['name']」でブラウザから受け取ったJSONデータを取得。

「return jsonify({'result': 'ok', 'value': name})」でデータをJSON形式に整形してブラウザに返却している。

これで、画面遷移を伴わずににサーバと通信することができる。

みつきんのメモ

組み込みエンジニアです。Interface誌で「Yocto Projectではじめる組み込みLinux開発入門」連載中

Flask-BootstrapでAJAX(jQuery)