[파이썬][Django] AJAX와 폼 처리 방법과 예제

29 Aug 2023

django

Django에서 AJAX를 사용하여 폼을 처리하는 방법과 간단한 예제를 살펴보겠습니다. AJAX를 사용하면 페이지를 새로 고치지 않고도 비동기적으로 데이터를 서버에 보내거나 받을 수 있습니다.

1. AJAX 라이브러리 포함

먼저, HTML 페이지에서 AJAX를 사용하기 위해 jQuery 또는 다른 AJAX 라이브러리를 포함해야 합니다. 이 예제에서는 jQuery를 사용하겠습니다. HTML 파일의 <head> 부분에 다음과 같이 jQuery 라이브러리를 포함시킵니다:

<pre>
<code>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</code>
</pre>

2. AJAX로 폼 데이터 보내기

폼을 AJAX로 처리하려면 다음 단계를 따릅니다:

2.1 HTML 폼 작성

<pre>
<code>

<form id="myForm" method="post">
    {% csrf_token %}
    <input type="text" name="name" id="name">
    <input type="submit" value="전송">
</form>
<div id="result"></div>

</code>
</pre>

2.2 AJAX 스크립트 작성

$(document).ready(function () {
    $('#myForm').submit(function (e) {
        e.preventDefault();  // 폼 제출 중지
        var formData = $(this).serialize();  // 폼 데이터 직렬화
        $.ajax({
            type: 'POST',
            url: '/your-api-endpoint/',  // Django 뷰의 URL
            data: formData,
            success: function (data) {
                $('#result').html(data);  // 서버 응답을 결과 <div>에 삽입
            }
        });
    });
});

2.3 Django 뷰 작성

서버 측에서 AJAX 요청을 처리하기 위해 Django 뷰를 작성합니다.

from django.shortcuts import render
from django.http import JsonResponse

def your_view(request):
    if request.method == 'POST':
        name = request.POST.get('name', '')
        # 여기에서 폼 데이터 처리

        # JSON 응답 생성
        response_data = {'message': '안녕, ' + name + '!'}
        return JsonResponse(response_data)
    
    return render(request, 'your_template.html')

3. 결과 표시

서버에서 전송한 데이터는 success 콜백 함수에서 받아와 HTML 페이지에 표시됩니다. 위의 코드에서는 결과를 <div id="result"> 요소에 삽입합니다.

이제 폼 데이터를 AJAX를 통해 서버로 전송하고 서버에서 응답을 받아 표시하는 기본적인 예제를 만들었습니다. 필요에 따라 더 복잡한 AJAX 요청을 처리하거나 응답을 다르게 처리할 수 있습니다.