PythonとFlaskでJqueryを使ってAjax通信をする方法

今回、PythonのフレームワークFlaskとAjax通信する方法を紹介します。Formで入力した値を非同期で受け取り表示させます。

Ajaxとは

Ajaxとは「Asynchronous JavaScript + XML」の略でAjaxを使うと非同期でサーバー通信を行うことができます。同期処理の場合はwebブラウザからサーバーにリクエストを送り、レスポンスが来るのを待たなければなりません。一方で非同期通信であればわざわざwebブラウザからリクエストを送らなくてもデータの処理をしてくれます。例えば、GoogleMapを利用するとき、位置を移動させても画像や画面の遷移がありません。これも非同期通信の技術が使われています。

HTMLでForm作成

完成イメージは動画の通りです。まずは、フォームを作成します。今回、苗字と名前を入力し、その結果をformタグの下の”output”に表示させます。 inputのidはfirstsnameとlastnameとします。

<form id="form">
      <h2>苗字</h2>
      <input type="text" id="firstname">
      <h2>名前</h2>
      <input type="text" id="lastname">
      <button type="submit" name="button">送信</button>
</form>
    <div id="output"></div>

続いてAjax通信をするための準備としてJqueryのscriptを<head>内に追加します。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Ajax通信のためのコードを書く

続いてAjax通信するためのコードを下記のように記述します。

  1. FormのSubmitボタンが押下されたときに
  2. Ajax通信開始。
  3. data:ではinputで設定したidと値とkey名を記述。typeはPOSTかGET。urlは送信先のurlを記述します。
<script type="text/javascript">
    $(document).ready(function() {
      ①formのsubmitボタンをクリック
      $('#form').on('submit',function(event){
     ②Ajax通信
        $.ajax({
          data : {
       ③form内inputの値、リクエスト(POST or GET),リクエスト先のURLを記述
            firstname : $('#firstname').val(),
            lastname : $('#lastname').val(),
          },
          type : 'POST',
          url : '/'
        })
     ④formの下に結果を表示
        .done(function(data){
          $('#output').text(data.output).show();
        });
        event.preventDefault();
      });
    });
  </script>

jsonify、render_templater、requestを設定

  • render_template・・・templateエンジンのhtmlをレンダリング
  • jsonity・・・JSON形式のレスポンスを返したり作成したり。
  • requset・・・POST,GETを使用する
from flask import Flask, render_templater,redirect,request,Blueprint,jsonify

JSON形式の値を受け取る

POSTされた時にAjax通信で送られてきたJSON形式の値を受け取ります。フォームの入力があったらjsonデータをoutputに返します。

@core.route('/',methods=['GET','POST'])

def index():

    if request.method == "POST":
        firstname = request.form['firstname']
        lastname = request.form['lastname']
        output = firstname + lastname
        if firstname and lastname:
            return jsonify({'output':'名前は:' + output + 'です'})
        return jsonify({'error' : 'Missing data!'})


    page = request.args.get('page',1,type=int)
    blog_posts = BlogPost.query.order_by(BlogPost.date.desc()).paginate(page=page,per_page=5)
    return render_template('index.html',blog_posts=blog_posts)

最後に

pythonのflaskを4月から開始してまだ勉強途中です。Ajaxなどの非同期通信を知識を深めるといいね機能やフォロー機能などブラウザを更新せずに結果を反映できるので、ユーザーが使いやすいサイトやアプリを開発できます。

最新情報をチェックしよう!
>文系エンジニア大学生の技術ブログ

文系エンジニア大学生の技術ブログ

社会が多様化していく中、大学生の学生生活も多様であるべきと考えています。主にエンジニア向けにITやプログラミングなどの技術系と大学生向けに休学、留学、海外生活、トビタテ留学、長期インターンに関する記事を書いています。