Flaskアプリケーションでボタンがクリックされたときの処理を実装するコードを紹介します。
Flaskアプリケーションでボタンがクリックされた場合の処理を実装する場合は、
ボタンのクリックにより、ページ遷移をしてページ遷移先のURLのルートハンドラでサーバー側の処理を記述します。
Flaskアプリケーションを作成します。
以下のコードを記述します。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>ボタンクリックのデモ</h1>
<form method="GET" action="/button_click">
<button type="submit">ボタン</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>ボタンクリックのデモ</h1>
<p>{{ AppMessage }}</p>
</body>
</html>
"""
This script runs the application using a development server.
It contains the definition of routes and views for the application.
"""
from flask import Flask, render_template
app = Flask(__name__)
# Make the WSGI interface available at the top level so wfastcgi can get it.
wsgi_app = app.wsgi_app
@app.route('/')
def func1():
return render_template("index.html")
@app.route('/button_click')
def func2():
return render_template("result.html", AppMessage="ボタンがクリックされました。")
if __name__ == '__main__':
import os
HOST = os.environ.get('SERVER_HOST', 'localhost')
try:
PORT = int(os.environ.get('SERVER_PORT', '5555'))
except ValueError:
PORT = 5555
app.run(HOST, PORT)
ボタンを配置したHTMLファイルを作成します。ボタンのクリックにより、/button_click にGETで遷移します。
ボタンクリックで遷移する遷移先の画面です。プレースホルダー AppMessage を配置してサーバー側のメッセージを表示できるようにします。
プレースホルダーの詳細はこちらの記事を参照してください。
アプリケーションルートのURLにアクセスした場合は、index.htmlのテンプレートを表示します。
@app.route('/')
def func1():
return render_template("index.html")
ボタンのクリックにより、(アプリケーションルート)/button_clickのURLにアクセスした場合は、
result.htmlのテンプレートを表示します。表示する際にプレースホルダーに "ボタンがクリックされました。" のメッセージを設定します。
@app.route('/button_click')
def func2():
return render_template("result.html", AppMessage="ボタンがクリックされました。")
プロジェクトを実行します。Webブラウザが起動し、下図のページが表示されます。ページ内のボタンをクリックします。
クリックするとページが切り替わり、「ボタンがクリックされました。」がページに表示されます。
Flaskアプリケーションでボタンのクリックを処理するプログラムを作成できました。
