Python에서 Ajax와 Django 통합

이 기사는 Ajax가 무엇인지 보여주고, Ajax를 Django와 통합하고, Ajax의 get 및 post 요청을 브라우저에서 보내고, Django 사이트의 데이터를 Python으로 처리하는 것을 목표로 합니다.

Python에서 Ajax와 Django 통합

Ajax는 비동기 JavaScript 및 XML의 약자이지만 이것이 의미하는 바는 무엇입니까? Ajax는 웹 페이지를 새로 고치지 않고 백그라운드에서 데이터를 보내고 검색하는 데 사용되는 웹 개발 기술일 뿐입니다.

실제 Ajax의 예는 Twitter로 이동하여 피드를 여는 경우입니다.

잠시 후, 새로운 트윗이 있음을 나타내는 메뉴 막대가 화면 상단에 표시되고 더 오래 기다리면 팔로우하는 사람들이 Twitter에 게시물을 올릴수록 숫자가 증가하는 것을 볼 수 있습니다.

페이지가 완전히 새로 고쳐지지 않는다는 점에 유의해야 합니다. 이제 Ajax에 대한 아이디어가 생겼으므로 Django 프레임워크와 함께 사용하는 방법을 살펴보겠습니다.

Ajax로 작업하는 방법을 보여주기 위해 간단한 프로젝트를 만들었지만 전체 프로젝트를 작업하는 방법을 보여주는 것은 불가능합니다. Django에 익숙하다면 Django 프로젝트를 만드는 방법을 이미 알고 있으므로 몇 개의 필드가 있는 contact라는 모델과 연락처 모델 양식에 대한 간단한 모델이 있습니다.

양식을 제출하면 데이터가 데이터베이스에 저장되고 동일한 페이지 자체로 리디렉션되고 해당 URL이 설정됩니다.

jQuery를 사용하여 Ajax를 트리거하고 CDN도 필요합니다. 따라서 양식을 제출할 때마다 양식에서 수행할 논리는 양식이 유효하면 서버가 응답한다는 것입니다.

우리는 양식의 객체를 가져오기 위해 일반 JavaScript를 사용하고 있으므로 submit 이벤트가 필요하며 해당 이벤트가 트리거되면 submithandler 함수를 호출합니다.

우리는 기본적으로 이벤트를 수신하는 submithandler 함수를 만들고 양식 제출의 기본 작업을 방지할 것입니다. 즉, 양식이 제출되지 않으므로 Ajax 요청을 하기 위해 jQuery를 작성합니다. HTML 파일.

Ajax 객체에 몇 가지 속성을 지정할 것입니다. 첫 번째는 요청 유형인 type입니다.

두 가지 유형의 요청을 전달할 수 있습니다. get 또는 post이므로 post를 전달해야 합니다. 다음 속성은 post 요청에 도달하려는 URL을 의미하는 url입니다.

그래서 여기에서 Django 템플릿 인덱스를 사용할 것입니다. 연락처 페이지의 URL을 전달합니다. contact는 url.py에 나중에 작성할 URL의 이름입니다.

이제 다음은 data입니다. 즉, 양식 데이터가 서버 측에서 양식 데이터를 처리하여 서버에서 처리되기를 원합니다. 따라서 양식 ID를 사용하여 Ajax 요청에서 해당 데이터를 보내야 합니다.

다음은 서버에서 다시 예상되는 데이터 유형인 dataType입니다. 따라서 보기에서 일부 HTTP 응답을 보내고 양식이 유효하거나 일부 JSON 데이터를 보내는 경우 JSON으로 데이터를 전달해야 합니다. 형식이므로 JSON 형식으로 전달합니다.

successFunction이라는 함수를 사용하는 마지막 속성에 success 속성을 전달했습니다. 이 함수는 요청이 성공하면 팝업 경고 창을 표시합니다.

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>

<script>
    const form = document.getElementById('form');
    form.addEventListener("submit", submitHandler);

    function submitHandler(e) {
        e.preventDefault();
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : '{% url 'contact' %}', // the url where we want to POST
            data        : $('#form').serialize(), // our form data
            dataType    : 'json', // what type of data do we expect back from the server
            success     : successFunction
        });
    }

    function successFunction(msg) {
        if (msg.message === 'success') {
            alert('Success!');
            form.reset()
        }
    }
</script>

이제 contact라는 이름으로 URL을 설정하고 view.py 파일에서 contact 메서드를 호출해야 합니다. 즉, 사용자가 이 URL을 방문하면 contact 메서드가 호출됩니다.

urlpatterns = [
    path("", views.contact, name="contact"),
]

이제 view.py 파일에서 뭔가를 할 수 있으므로 양식을 제출할 때마다 contact 함수가 해당 함수를 호출하고 이를 포착하고 Ajax 요청을 수신하고 Ajax가 요청이 유효하거나 .is_ajax() 메소드를 사용하지 않습니다.

from django.http import JsonResponse
from django.shortcuts import render, redirect
from .forms import ContactModelForm


def contact(request):
    form = ContactModelForm()

    if request.is_ajax():
        form = ContactModelForm(request.POST)
        print(request.POST)
        if form.is_valid():
            form.save()
            return JsonResponse({"message": "success"})
    return render(request, "contact.html", {"form": form})

여기를 클릭 Ajax와 Django를 통합하기 위한 공식 문서를 읽으십시오.