AJAX를 사용하여 서버(Flask)에 데이터를 요청하는 두 가지 방법

클라이언트에서는 데이터를 표시하기 위해 일반적인 2가지 방식을 제공합니다.

사용자가 URL로 접속하여 일반적으로 페이지가 로딩이 될 때 특별한 행동을 하지 않아도 페이지가 로드되는 것처럼

접속할 때 서버로 요청을 보내는 방식과 사용자의 행동에 의해 서버로 특정 데이터를 요청하는 경우입니다.

 

오늘은 클라이언트에서 Flask 서버로 데이터를 요청하는 방법 2가지에 대해 아래의 예시 코드와 함께 설명을 드리도록 하겠습니다.

 

Flask에서 응답하는 경우에 대해서는 다음 글에 설명을 드리도록 하겠습니다.

이전의 글을 확인하시려면 아래의 글을 확인해주세요.

Flask + JavaScript 데이터 전송 방향에 따른 구분(파이썬을 이용한 웹 서비스 만들기)

인천고래 AI이미지

1. 페이지 로딩 시 데이터를 요청하는 방식

이 방법은 웹 페이지가 로드될 때 자동으로 서버에 데이터를 요청합니다.

이는 사용자가 페이지에 처음 접근할 때 초기 데이터를 로드하는 데 유용합니다. 

<script>
// 자바스크립트 선언부
$(document).ready(function() {
    // 페이지가 로드될 때 데이터를 요청하는 AJAX 호출
    $.ajax({
        url: '/some-endpoint', // 서버의 엔드포인트 URL
        type: 'GET', // 데이터를 가져오는 GET 요청
        success: function(response) {
            // 서버로부터 응답을 성공적으로 받았을 때 실행될 함수
            console.log(response);
            // 여기에서 받은 데이터를 페이지에 표시하는 로직을 추가할 수 있습니다.
        },
        error: function(error) {
            // 요청에 실패했을 때 실행될 함수
            console.error(error);
        }
    });
});
</script>

 

 

 

2. 버튼 클릭 시 데이터를 요청하는 방식

이 방법은 사용자가 페이지 내의 특정 버튼을 클릭했을 때, 서버에 특정 데이터를 요청하는 이벤트를 발생시킵니다.

이때, 요청에 추가적인 데이터(예: 필터링 조건)를 포함시켜 서버로부터 특정 조건에 맞는 데이터를 받아올 수 있습니다.

<script>
// 자바스크립트 선언부
$(document).ready(function() {
    $('#fetchDataButton').click(function() {
        // 버튼 클릭 이벤트 핸들러
        $.ajax({
            url: '/filtered-data', // 필터링된 데이터를 요청하는 서버의 엔드포인트
            type: 'POST', // 서버로 추가 데이터를 전송하기 위한 POST 요청
            data: {
                filter: 'someFilter', // 서버에 전송할 필터링 조건 또는 기타 데이터
            },
            success: function(response) {
                // 서버로부터 응답을 성공적으로 받았을 때 실행될 함수
                console.log(response);
                // 여기에서 받은 데이터를 페이지에 표시하는 로직을 추가할 수 있습니다.
            },
            error: function(error) {
                // 요청에 실패했을 때 실행될 함수
                console.error(error);
            }
        });
    });
});
</script>

<button id="fetchDataButton">데이터 가져오기</button>

 

이 예시들은 jQuery를 사용한 AJAX 요청의 기본적인 형태를 보여줍니다.

페이지 로딩 시 자동으로 데이터를 요청하는 방식은 사용자가 페이지에 처음 접근했을 때 필요한 데이터를 로드하는 데 적합하며, 버튼 클릭 같은 사용자의 액션에 따라 데이터를 요청하는 방식은 사용자 인터랙션에 따라 동적으로 데이터를 업데이트하고 싶을 때 유용합니다.

 

이 글이 여러분들에게 도움이 되는 글이 되기를 바랍니다.