[python] Flask-WTF에서 Ajax를 사용하여 서버로 폼 데이터를 전송하는 방법은 어떻게 되나요?

23 Nov 2023

python

Flask-WTF를 사용하여 Ajax를 통해 서버로 폼 데이터를 전송하는 방법을 알아보겠습니다.

먼저, Flask-WTF와 jQuery를 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다.

pip install Flask-WTF

그리고 templates 폴더에 form.html 파일을 생성합니다. 이 파일에서는 Ajax를 통해 서버로 데이터를 전송할 폼을 만들 것입니다.

<!-- form.html -->
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <form id="myForm">
    {{ form.csrf_token }}
    {{ form.name.label }} {{ form.name }}
    {{ form.email.label }} {{ form.email }}
    <button type="submit">전송</button>
  </form>
  <div id="result"></div>

  <script>
    $(document).ready(function() {
      $('#myForm').submit(function(event) {
        event.preventDefault();  // 기본 동작 방지

        var formData = $(this).serialize();  // 폼 데이터 시리얼라이즈

        $.ajax({
          type: 'POST',
          url: '/submit',
          data: formData,
          success: function(response) {
            $('#result').html(response);
          },
          error: function(error) {
            console.log(error);
          }
        });
      });
    });
  </script>
</body>
</html>

위 코드에서는 myForm 폼을 서버로 전송하는데, ajax를 사용하여 비동기로 데이터를 전송하고 결과를 result라는 <div>에 출력합니다.

다음으로, Flask 애플리케이션에서 해당 폼을 렌더링해야 합니다. Flask 애플리케이션 파일(app.py)에 다음 코드를 추가합니다.

# app.py
from flask import Flask, render_template, request

from flask_wtf import FlaskForm
from wtforms import StringField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = '<your-secret-key>'

class MyForm(FlaskForm):
    name = StringField('이름', validators=[DataRequired()])
    email = StringField('이메일', validators=[DataRequired()])

@app.route('/')
def index():
    form = MyForm()

    return render_template('form.html', form=form)

@app.route('/submit', methods=['POST'])
def submit():
    name = request.form['name']
    email = request.form['email']

    # 처리 로직

    return '전송 완료'

if __name__ == '__main__':
    app.run()

위 코드에서는 Flask 애플리케이션을 생성하고, /submit 경로로 POST 요청이 들어오면 폼 데이터를 처리하여 결과를 반환합니다. <your-secret-key> 부분을 적당한 시크릿 키로 변경해야 합니다.

이제 Flask 애플리케이션을 실행하고 http://localhost:5000에 접속하면 폼이 나타납니다. 이름과 이메일을 입력하고 전송 버튼을 클릭하면 폼 데이터가 서버로 전송되고 결과가 출력됩니다.

이것은 Flask-WTF에서 Ajax를 사용하여 서버로 폼 데이터를 전송하는 간단한 예제입니다.