Kensuke Kousaka's Blog

Notes for Developing Software, Service.

FlaskとjQueryのAjaxでPOST

前回作成したシステムを元に,jQueryAjaxを用いて送信されてきたPOSTリクエストをFlaskで受け取り,データを加工した上でjQueryに返信してWebページに反映させるようなページを作成する.

index.htmlの編集

まずは,index.htmlを以下のように変更する.

<!DOCTYPE html>
<html lang="ja">
 <head>
   <meta charset="utf-8"></meta>
   <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
   <meta content="width=device-width, initial-scale=1" name="viewport"></meta>
   <title>HelloFlask</title>
   <!-- Bootstrap CDN -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

   <link rel="stylesheet" href="../static/css/sample.css">
 </head>
 <body>
   <div class="container-fluid">
     <div class="row">
       <div class="col-sm-12">
         <h1 class="text-center" id="hello">Hello Flask</h1>
         <input type="text" class="form-control" id="input-text" placeholder="Please input text">
         <button class="btn btn-default" id="button">Change text</button>
       </div>
     </div>
   </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   <script src="../static/js/sample.js"></script>
 </body>
</html>

text属性のinput要素を追加し,テキストを入力できるようにしている.

sample.jsの編集

次に,sample.jsを以下のように変更する.

$(window).load(init());

function init() {
  $("#button").click(function() {
    var textData = JSON.stringify({"text":$("#input-text").val()});
    $.ajax({
      type:'POST',
      url:'/postText',
      data:textData,
      contentType:'application/json',
      success:function(data) {
        var result = JSON.parse(data.ResultSet).result;
        $("#hello").text(result);
      }
    });
    return false;
  });
}

ボタンクリック時に,先ほどindex.htmlに追加したinput要素から入力されたテキストを取得し,ajaxを用いてFlaskに送信する. そしてFlaskから返ってきたデータを受け取り,Webページにページ遷移無くテキスト書き換えを行う.

app.pyの編集

最後に,app.pyを以下のように変更する.

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from flask import Flask, render_template
from flask import request, jsonify
import json

app = Flask(__name__)


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

@app.route('/postText', methods=['POST'])
def lower_conversion():
   text = request.json['text']
   if "ping" in text:
       return_data = {"result":"pong"}
       return jsonify(ResultSet=json.dumps(return_data))
   lower_text = text.lower()
   return_data = {"result":lower_text}
   return jsonify(ResultSet=json.dumps(return_data))


if __name__ == '__main__':
   app.run(host="127.0.0.1", port=8080)

sample.jsajaxの中でurlに/postTextを指定しているが,このurlをapp.pyにおいてリクエストを受け取って処理を行う関数の上に@app.routeで指定する. また,この際にmethodsでもってGETPOSTなどのうち,どのようなリクエストに紐付けるかを指定する. 今回の例ではsample.jsからPOSTのリクエストが飛んでくるので,methodsPOSTを指定している.

sample.jsから送られてくるデータはjsonで固めてあるので,flaskの中にあるrequestjsonを用いて取り出す. その後この例では,送られてきたテキストにpingが含まれていればpongsample.jsに返し,それ以外の場合は送られてきたテキストを小文字に変換したものを返すようにしている.

あとは,データを受け取ったsample.jsが,テキストをjsonから取り出してWebページに反映させる.

編集できたらapp.pyを起動してアクセスし,inputフォームにpingだとか大文字の英単語などを入れてボタンをクリックしてくれれば,なんとなく動作がわかると思う.

なお,このサンプルアプリはGitHubに公開している.