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

23 Nov 2023

python

HTML 폼 생성하기

먼저, HTML 폼을 생성해야 합니다. Flask-WTF를 사용하면 간편하게 폼을 생성할 수 있습니다. 예를 들어, 다음과 같이 HTML 파일에 폼을 작성합니다:

<form id="myForm" method="POST">
  {{ form.hidden_tag() }}
  {{ form.name.label }} {{ form.name() }}<br>
  {{ form.email.label }} {{ form.email() }}<br>
  <input type="submit" value="전송">
</form>

Ajax 요청 보내기

Ajax를 사용하여 폼 데이터를 서버로 전송하려면 JavaScript 코드를 작성해야 합니다. jQuery를 사용하면 아래와 같이 간단하게 Ajax 요청을 보낼 수 있습니다:

$(document).ready(function() {
  $("#myForm").submit(function(event) {
    event.preventDefault();  // 폼이 실제로 제출되는 것을 방지

    $.ajax({
      type: "POST",
      url: "{{ url_for('submit_form') }}",  // Flask 경로 함수 사용
      data: $(this).serialize(),  // 폼 데이터 직렬화
      success: function(response) {
        // 서버로부터의 응답 처리
        console.log(response);
      }
    });
  });
});

서버에서 폼 데이터 처리하기

Flask 서버에서는 폼 데이터를 처리하기 위해 애플리케이션에 해당하는 라우트를 생성해야 합니다. 다음은 Flask 경로 함수와 라우트 함수의 예입니다:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def submit_form():
    if request.method == 'POST':
        name = request.form.get('name')
        email = request.form.get('email')

        # 폼 데이터 처리 로직 작성

        return '폼 데이터가 성공적으로 전송되었습니다.'

    return render_template('index.html')

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

이제 위의 코드를 실행하고 웹 브라우저에서 폼을 작성하여 전송해보세요. Ajax를 사용하면 페이지 전체가 새로고침되지 않고 폼 데이터가 서버로 전송됩니다. 서버에서는 해당 데이터를 받아서 원하는 대로 처리할 수 있습니다.

참고 문서:

Flask: flask.palletsprojects.com
Flask-WTF: flask-wtf.readthedocs.io
jQuery.ajax(): api.jquery.com/jquery.ajax