フラスコ Ajax

  2. プログラミングのヒント
  3. Python Flask Howto
  4. フラスコ Ajax
Salman Mehmood 2024年2月15日
Flask Flask AJAX
フラスコ Ajax

この説明では、jQuery と Flask を使用して AJAX フォームを送信する方法を学習します。ここで、jQuery は AJAX 部分を処理し、Flask は AJAX 要求を受け入れます。

jQuery と Flask を使用して AJAX フォームを送信する

次に、app.py ファイルを作成して、実際にコードを記述します。 したがって、最初に処理したいのはサーバー側です。

ここで、AJAX リクエストから渡されたデータを取得する post-data というルートを追加し、投稿リクエストのみを受け入れます。 Post_DATA() という関数を定義します。この関数内で、フォームから渡されるデータを取得する必要があります。

通常、AJAX はディクショナリとリクエスト オブジェクトの形式になります。

Employee_Email という最初のオブジェクトを作成し、request.form['Employee_Email'] を保存します。これは、フォーム フィールドからデータを探していることを意味します。 次に、Employee_Name という別のオブジェクトで同じことを行います。

Employee_Email = request.form["Employee_Email"]
Employee_Name = request.form["name"]

次に、このデータを処理します。Employee_Email と Employee_Name の両方が存在する場合は、New_EMP_Name を作成します。 Employee_Name[::-1] を使用して Employee_Name を逆にします。

ここで、jsonify() 関数を使用して New_EMP_Name である JSON オブジェクトを返します。ブロックが実行されない場合は、キー error とその値を持つ JSON オブジェクトを返します。

if Employee_Name and Employee_Email:
    New_EMP_Name = Employee_Name[::-1]

    return jsonify({"Employee_Name": New_EMP_Name})

return jsonify({"error": "Missing some data!"})

このフォームが送信されると、それを送信するためのイベントが必要になります。 そのため、jQuery から処理します。

通常、HTML では、フォームがあり、送信を押すと、データを自動的に投稿しようとします。 これは組み込みの HTML 機能です。 フォームを送信するのに JavaScript は必要ありません。

jQuery を使用してデータを送信するため、イベントが必要になります。 event は無名関数のパラメーターであり、event.preventDefault() が最後に配置され、フォームがデータを 2 回送信するのを防ぎます。

$(document).ready(function() {
  $('form').on('submit', function(event) {
    event.preventDefault();
  });
});

関数内で、ドル記号を使用して ajax を呼び出し、引数を作成する必要があります。 データには Employee_Email と Employee_Name の 2つのオブジェクトが含まれます。 対応する入力 ID によってデータをトリガーします。

ここで、リクエストの type を指定する必要があります。これは POST である必要があります。なぜなら、Flask コードでは投稿リクエストのみを受け入れているため、URL は /post-data。

$.ajax({
  data:
      {Employee_Name: $('#input_n').val(), Employee_Email: $('#input_e').val()},
  type: 'POST',
  url: '/post-data'
})

ここで、done 関数を作成し、この関数内に if-else ステートメントを作成して、エラーが発生するかどうかを確認します。 HTML ファイルからアラート ボックス ID にアクセスしています。エラーが発生すると、エラー メッセージのアラートが選択され、成功したアラートが非表示になります。

if 条件が true にならない場合は、else ブロックに移動し、正反対のことを行い、この JSON オブジェクトからのテキスト データを成功アラートに入力してから、エラー アラートを非表示にします。

.done(function(data) {
  if (data.error) {
    $('#errorAlert').text(data.error).show();
    $('#successAlert').hide();
  } else {
    $('#successAlert').text(data.Employee_Name).show();
    $('#errorAlert').hide();
  }

それでは、Flask アプリを実行して、アプリのルートをナビゲートしてみましょう。 フォーム内で、電子メール、名前の順に入力します。送信後、ページをリロードせずに逆の順序で名前が返されることがわかります。

Flask AJAX 出力

完全な Python コード:

from flask import Flask, request, jsonify, render_template

app = Flask(__name__)


@app.route("/")
def Main_Page():
    return render_template("index.html")


@app.route("/post-data", methods=["POST"])
def Post_DATA():

    Employee_Email = request.form["Employee_Email"]
    Employee_Name = request.form["Employee_Name"]

    if Employee_Name and Employee_Email:
        New_EMP_Name = Employee_Name[::-1]

        return jsonify({"Employee_Name": New_EMP_Name})

    return jsonify({"error": "Missing some data!"})


if __name__ == "__main__":
    app.run(debug=True)

完全な JavaScript コード:

$(document).ready(function() {
  $('form').on('submit', function(event) {
    $.ajax({
       data: {
         Employee_Name: $('#input_n').val(),
         Employee_Email: $('#input_e').val()
       },
       type: 'POST',
       url: '/post-data'
     }).done(function(data) {
      if (data.error) {
        $('#errorAlert').text(data.error).show();
        $('#successAlert').hide();
      } else {
        $('#successAlert').text(data.Employee_Name).show();
        $('#errorAlert').hide();
      }
    });

    event.preventDefault();
  });
});

完全な HTML コード:

<!DOCTYPE html>
<html>
<head>
    <title>Flask Form</title>

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

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <script src="{{ url_for('static', filename='index.js') }}"></script>
</head>
<body>
<div class="container">
    <br><br><br><br>
    <form class="form-inline">
      <div class="form-group">
        <label class="sr-only" for="input_e">Email address</label>
        <input type="email" class="form-control" id="input_e" placeholder="Email">
      </div>
      <div class="form-group">
        <label class="sr-only" for="input_n">Name</label>
        <input type="text" class="form-control" id="input_n" placeholder="First Name">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <br>
    <div id="successAlert" class="alert alert-success" role="alert" style="display:none;"></div>
    <div id="errorAlert" class="alert alert-danger" role="alert" style="display:none;"></div>
</div>
</body>
</html>
著者： Salman Mehmood
Salman Mehmood avatar Salman Mehmood avatar

Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.

LinkedIn