[python] Flask와 AJAX를 이용한 비동기 통신 구현

18 Dec 2023

python

이번에는 Flask와 AJAX를 이용하여 웹 애플리케이션에서 비동기 통신을 구현하는 방법을 알아보겠습니다. 비동기 통신을 사용하면 웹 페이지의 일부분만 업데이트하거나 데이터를 동적으로 불러올 수 있어 사용자 경험을 향상시킬 수 있습니다.

Flask로 서버 구성하기

먼저, Flask 애플리케이션을 설정합니다.

from flask import Flask, request, jsonify, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/api/data', methods=['POST'])
def send_data():
    data = {"message": "Hello, this is data from the server!"}
    return jsonify(data)

위 코드에서 /api/data 엔드포인트는 POST 요청을 수신하고 JSON 형식으로 데이터를 응답합니다.

AJAX를 사용하여 데이터 요청

이제, 웹 페이지에서 JavaScript를 사용하여 서버로 데이터를 요청하는 AJAX 요청을 보냅니다.

<!DOCTYPE html>
<html>
<head>
    <title>AJAX 통신 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="get-data">데이터 가져오기</button>
    <div id="result"></div>
    <script>
        $(document).ready(function(){
            $('#get-data').on('click', function(){
                $.ajax({
                    method: 'POST',
                    url: '/api/data',
                    success: function(response){
                        $('#result').text(response.message);
                    }
                });
            });
        });
    </script>
</body>
</html>

위의 코드에서는 get-data 버튼을 클릭하면 AJAX를 사용하여 /api/data 엔드포인트로 POST 요청을 전송하고, 서버에서 응답한 데이터를 result 요소에 표시합니다.

이제, Flask와 AJAX를 사용하여 비동기 통신을 구현하는 방법을 알아보았습니다.

결론

Flask와 AJAX를 이용한 비동기 통신을 통해 웹 애플리케이션에서 동적으로 데이터를 가져오고 업데이트하는 방법을 살펴보았습니다. 이를 통해 사용자들은 웹 페이지를 새로고침할 필요 없이 실시간으로 업데이트된 정보를 확인할 수 있습니다.

참고문헌:

Flask 공식 문서: https://flask.palletsprojects.com/
jQuery 공식 문서: https://api.jquery.com/