Colin's Blog
[python] Flask-WTF에서 Ajax를 사용하여 서버로 폼 데이터를 전송하는 방법은 어떻게 되나요?
  1. 라이브러리 가져오기 먼저 Flask-WTF와 Flask의 request 모듈을 가져와야 합니다. 아래와 같이 코드를 작성하여 필요한 라이브러리를 가져옵니다.
from flask import Flask, render_template, request, jsonify
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
  1. 폼 생성하기 Flask-WTF를 사용하여 서버에 전송할 폼을 생성합니다. StringField로 입력 필드를 만들고, SubmitField로 제출 버튼을 만듭니다.
class MyForm(FlaskForm):
    name = StringField('이름')
    email = StringField('이메일')
    submit = SubmitField('전송')
  1. Flask 애플리케이션 설정하기 Flask 애플리케이션을 설정하고, 위에서 생성한 폼을 렌더링합니다.
app = Flask(__name__)
app.config['SECRET_KEY'] = 'mysecretkey'  # 보안을 위한 임의의 키 설정

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()
    return render_template('index.html', form=form)
  1. Ajax 요청 처리하기 이제 Ajax 요청을 처리하는 엔드포인트를 추가합니다. 폼 데이터는 Flask의 request 모듈을 사용하여 가져올 수 있습니다.
@app.route('/submit', methods=['POST'])
def submit():
    name = request.form['name']
    email = request.form['email']
    
    # 폼 데이터 처리 로직을 작성합니다.
    
    return jsonify({'message': '성공적으로 전송되었습니다.'})
  1. 클라이언트 측 코드 작성하기 클라이언트 측에서 Ajax를 사용하여 서버로 폼 데이터를 전송하려면 JavaScript 코드를 작성해야 합니다. 아래 예시는 jQuery를 사용한 Ajax 요청 코드입니다.
$(document).ready(function() {
    $('form').submit(function(event) {
        event.preventDefault();  // 기본 이벤트 동작을 막습니다.
        
        var name = $('#name').val();
        var email = $('#email').val();
        
        $.ajax({
            url: '/submit',
            type: 'POST',
            data: {
                'name': name,
                'email': email
            },
            success: function(response) {
                alert(response.message);
            },
            error: function(error) {
                alert('오류가 발생했습니다.');
            }
        });
    });
});

이렇게하면 폼 데이터가 서버로 Ajax 요청으로 전송되고, 서버에서 요청을 처리한 후 클라이언트에 응답을 보낼 수 있습니다.

참고문헌:

© 2018 Colin. All rights reserved.