今回、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通信するためのコードを下記のように記述します。
- FormのSubmitボタンが押下されたときに
- Ajax通信開始。
- 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)
最後に
FlaskのドキュメントはDjangoやRailsに比べて少ないので解決策を見出すまで苦労します。独学でFlaskを学ばれている方は是非こちらの記事も参考にしてみてください。
本記事ではこれからPythonのフレームワーク「Flask」を学ぶ方に向けてFlaskの学習手順とおすすめの学習サービスを紹介していきたいと思います。 悩む人 Pythonのマイクロフレームワーク「Flask」を学びたいけど、[…]
本記事ではプログラミングを独学で学んでいる初心者向けにUdemyのPythonおすすめコースを紹介していきます。 悩む人 Udemyを使用して独学でPythonを学びたいけど、おすすめの教材はどれなんだろう。プログラミング初心[…]
本記事ではプログラミング初心者に向けてプログラミングが難しいと感じる理由と挫折しない方法についてまとめていきます。 エンジニアに転職したい、フリーランスになりたい、ITスキルを身につけたいと様々な理由でプログラミング学習を始める方が[…]