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

23 Nov 2023

python

1. HTML에서 폼과 Ajax 스크립트 설정

먼저, HTML에서 폼을 작성하고 Ajax 스크립트를 설정해야 합니다. 다음은 간단한 폼과 Ajax 스크립트의 예입니다.

<form id="myForm">
  <input type="text" name="name" id="name">
  <input type="email" name="email" id="email">
  <button type="submit">전송</button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      event.preventDefault(); // 폼의 기본 동작 방지
      var formData = {
        name: $('#name').val(),
        email: $('#email').val()
      };
      $.ajax({
        type: 'POST',
        url: '/submit-form',
        data: formData,
        success: function(response) {
          console.log(response);
        }
      });
    });
  });
</script>

2. Flask 애플리케이션에서 라우트 설정

Flask 애플리케이션에서는 /submit-form URL에 대한 라우트를 설정해야 합니다. 이 라우트는 Ajax 요청을 처리합니다. 다음은 Flask 애플리케이션에서 라우트를 설정하는 예입니다.

from flask import Flask, request

app = Flask(__name__)

@app.route('/submit-form', methods=['POST'])
def submit_form():
    name = request.form.get('name')
    email = request.form.get('email')
    # 폼 데이터 처리 로직 작성
    return 'Success'

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

위의 예제에서 request.form.get() 메서드를 사용하여 Ajax로 전송된 폼 데이터를 가져올 수 있습니다. 폼 데이터를 처리하는 로직을 작성한 후에는 원하는 동작을 수행할 수 있습니다.

이제 마크다운 문서에서 Flask-WTF를 사용하여 Ajax를 통해 폼 데이터를 전송하는 방법에 대해 알게 되었습니다. 이를 활용하여 웹 애플리케이션에서 동적으로 데이터를 업데이트하고 사용자 경험을 개선할 수 있습니다.

참고자료:

Flask-WTF 공식 문서: https://flask-wtf.readthedocs.io
jQuery 공식 문서: https://jquery.com