플라스크 아약스

Salman Mehmood 2024년2월15일

Flask Flask 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()는 양식이 데이터를 두 번 제출하는 것을 방지하기 위해 마지막에 배치됩니다.

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

함수 내에서 달러 기호를 사용하여 ajax를 호출하고 인수를 구성해야 합니다. 데이터에는 Employee_Email 및 Employee_Name이라는 두 개체가 포함됩니다. 해당 입력 ID로 데이터를 트리거합니다.

이제 요청의 유형을 지정해야 하며 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 조건이 참이 아닌 경우 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

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.