Python FlaskでJavaScript関数を実行する方法

Jinjaテンプレートを使用してJavaScriptを埋め込む方法:

FlaskのJinjaテンプレートエンジンを使用すると、HTMLテンプレート内でJavaScriptコードを埋め込むことができます。例えば、以下のようなコードでJavaScript関数を実行することができます。

<!DOCTYPE html>
<html>
<head>
  <title>FlaskとJavaScript</title>
</head>
<body>
  <h1>FlaskとJavaScriptの連携</h1>
  <button onclick="myFunction()">ボタン</button>
  <script>
    function myFunction() {
      alert('JavaScript関数が実行されました！');
    }
  </script>
</body>
</html>

Ajaxリクエストを使用してJavaScript関数を呼び出す方法:

Flaskのエンドポイントを作成し、JavaScriptからAjaxリクエストを送信して関数を呼び出すことができます。以下は、FlaskとjQueryを使用してAjaxリクエストを送信するコード例です。

Flask側のコード:

JavaScript側のコード:

<!DOCTYPE html>
<html>
<head>
  <title>FlaskとJavaScriptの連携</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>FlaskとJavaScriptの連携</h1>
  <button onclick="callFlaskEndpoint()">ボタン</button>
  <script>
    function callFlaskEndpoint() {
      // Ajaxリクエストを作成
      $.ajax({
        url: '/my-endpoint',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ 'key': 'value' }),
        success: function(response) {
          alert(response.message);
        }
      });
    }
  </script>
</body>
</html>

これらは、Python FlaskとJavaScriptを連携させるための2つの一般的な方法です。他にもさまざまな方法がありますが、ここでは簡単な例を紹介しました。特定の要件に合わせて適切な方法を選択してください。