これらの続き
前回Flask-BootstrapでjQueryを使用する方法を紹介したが、ブラウザ側でボタンのラベルを書き換えるだけだった。
今回はAJAXを使用して、ブラウザとサーバ(Flask)で通信させる。
ディレクトリ構成
毎度おなじみのディレクトリ構成
. ├── ajax.py └── templates └── ajax.html
ajax.html(htmlファイル)
ブロックごとに解説するため、2つに分ける。
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形式に整形してブラウザに返却している。
これで、画面遷移を伴わずににサーバと通信することができる。