- テンプレートエンジンを使用する方法: Flaskでは、テンプレートエンジンを使用してHTMLをレンダリングします。JavaScript関数を呼び出すためには、テンプレート内でJavaScriptコードを埋め込むことができます。例えば、以下のようなコードを使用します。
Flaskのルート関数内で、テンプレートに渡すデータを指定します。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
data = {'name': 'John'}
return render_template('index.html', data=data)
if __name__ == '__main__':
app.run()index.htmlという名前のテンプレートファイルを作成し、JavaScript関数を呼び出すコードを追加します。
<!DOCTYPE html>
<html>
<head>
<title>Flask JavaScript関数呼び出し</title>
</head>
<body>
<h1>Hello, {{ data.name }}!</h1>
<script>
function greet() {
alert('Hello from JavaScript!');
}
greet(); // JavaScript関数を呼び出す
</script>
</body>
</html>この例では、Flaskのルート関数内でdataという変数を定義し、テンプレートに渡しています。テンプレート内では{{ data.name }}という形式でデータにアクセスできます。JavaScript関数greet()は<script>タグ内で定義され、その後で呼び出されています。
- APIエンドポイントを使用する方法: もう一つの方法は、FlaskのAPIエンドポイントを使用してJavaScript関数を呼び出すことです。JavaScriptからAjaxリクエストを送信し、Flaskの特定のURLに対して処理を行わせます。
以下はサーバーサイドのFlaskコードの例です。
from flask import Flask, jsonify, request
app = Flask(__name__)
@app.route('/api/greet', methods=['POST'])
def greet():
data = request.get_json()
name = data['name']
message = f'Hello, {name}!'
return jsonify({'message': message})
if __name__ == '__main__':
app.run()JavaScriptコードの例を以下に示します。
<!DOCTYPE html>
<html>
<head>
<title>Flask JavaScript関数呼び出し</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button onclick="callAPI()">APIを呼び出す</button>
<script>
function callAPI() {
var name = 'John';
var url = '/api/greet';
$.ajax({
type: 'POST',
url: url,
data: JSON.stringify({ 'name': name }),
contentType: 'application/json',
success: function(response) {
alert(response.message);
}
});
}
</script>
</body>
</html>この例では、JavaScriptのcallAPI()関数がボタンがクリックされると呼び出されます。$.ajax()メソッドを使用してAPIエンドポイント/api/greetにPOSTリクエストを送信し、レスポンスのメッセージをアラートで表示します。
以上がFlaskからJavaScriptの関数を呼び出す方法の例です。どちらの方法も一般的に使用されており、状況に応じて適切な方法を選択できます。