DEV 네트워크는 무엇입니까?

이 빠른 자습서에서는 AJAX를 사용하여 페이지를 새로 고치지 않고 Django 양식을 게시하는 방법을 보여 드리겠습니다.

이미 프로젝트를 생성했다고 가정합니다. models.py에서 매우 간단한 Post 모델을 생성하는 것부터 시작하겠습니다.

from django.db import models

class Post (models.Model):
    title = models.CharField(max_length=50)
    description = models.TextField()

    def __str__(self):
        return self.title

일단 views.py를 열고 다음 코드를 삽입합니다.

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

def create_post(request):
    posts = Post.objects.all()
    response_data = {}

    if request.POST.get('action') == 'post':
        title = request.POST.get('title')
        description = request.POST.get('description')

        response_data['title'] = title
        response_data['description'] = description

        Post.objects.create(
            title = title,
            description = description,
            )
        return JsonResponse(response_data)

    return render(request, 'create_post.html', {'posts':posts})        

보시다시피 JSON 인코딩 응답을 만드는 데 도움이 되는 HttpResponse 하위 클래스인 JsonResponse를 가져왔습니다. 기본 Content-Type 헤더는 application/json으로 설정됩니다. 첫 번째 매개변수인 data는 dict 인스턴스여야 합니다. JSON 데이터를 사용하여 작성된 게시물을 바로 표시합니다.

request.POST[]와 request.POST.get()의 차이점을 더 잘 이해하려면 다음 StackOverflow 질문을 살펴보는 것이 좋습니다.

2012년 9월 20일
댓글: 1
답변: 3

91

차이점은 무엇입니까

request.POST.get('sth')

그리고

request.POST['sth']

비슷한 질문을 찾지 못했습니다. 둘 다 저에게 동일하게 작동합니다. 별도로 사용할 수 있다고 가정하지만 제가 틀렸을 수도 있습니다. 그래서 제가 묻는 것입니다. 어떤 아이디어?





Open Full Question




페이지에 둘 이상의 양식이 있는 경우 조치를 사용하여 양식을 분리할 수 있으므로 보기가 동시에 여러 요청을 받지 않습니다.

단일 단계에서 객체를 생성하고 저장하기 위해 create() 메서드를 사용하고 있습니다.

이제 html 양식을 살펴보겠습니다.

<form method="POST" id="post-form">
  {% csrf_token %}
  <div class="form-group">
    <label>Title</label>
    <input type="text" class="form-control" id="title" placeholder="Title">
  </div>
   <div class="form-group">
     <label>Description</label>
     <textarea class="form-control" id="description" placeholder="Description"></textarea>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

아시다시피 우리는 csrf_token을 사용하여 게시물 요청을 만들고 있으며 이는 단순한 부트스트랩 형식입니다. 우리는 id로 AJAX로 값을 얻기 위해 각 입력에 대해 id를 제공합니다.

$(document).on('submit', '#post-form',function(e){
    $.ajax({
        type:'POST',
        url:'{% url "create" %}',
        data:{
            title:$('#title').val(),
            description:$('#description').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
            action: 'post'
        },
        success:function(json){
            document.getElementById("post-form").reset();
            $(".posts").prepend('<div class="col-md-6">'+
                '<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">' +
                    '<div class="col p-4 d-flex flex-column position-static">' +
                        '<h3 class="mb-0">' + json.title + '</h3>' +
                        '<p class="mb-auto">' + json.description + '</p>' +
                    '</div>' +
                '</div>' +
            '</div>' 
            )
        },
        error : function(xhr,errmsg,err) {
        console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
    }
    });
});

정적 파일에 jquery-2.2.4.min.js를 포함해야 하며 my git repository 에서 가져올 수 있습니다.

괜찮은! 여기서 무슨 일이 일어나고 있습니까? 처음에는 jQuery가 양식 제출을 감지할 수 있도록 id 속성을 양식에 추가하는 것이 중요합니다. AJAX 유형은 데이터베이스에 데이터를 보내고 있기 때문에 게시되는 요청 유형을 지정하고 url은 요청을 보낼 URL을 지정합니다. 그런 다음 val() 메서드를 사용하여 id로 양식 요소의 값을 가져오고 서버로 보낼 데이터를 지정하는 data 매개 변수와 함께 보냅니다. csrf_token 값을 가져와야 합니다. 그렇지 않으면 403 Forbidden 오류가 발생합니다. 보시다시피 우리는 뷰가 어떤 양식이 제출되고 있는지 감지할 수 있도록 조치를 지정했습니다.

요청이 성공적으로 전송되면 양식을 정리하고 바로 새 게시물을 게시물 행에 추가합니다.

The .prepend() method inserts the specified content as the first child of each element in the jQuery collection (To insert it as the last child, use .append()).

요청을 보내는 동안 오류가 발생하면(그렇지 않길 바랍니다😅) 마지막 함수가 이 오류 정보를 콘솔에 추가하므로 이 불쾌한 오류의 원인을 확인할 수 있습니다. 사용자에게 오류를 멋지게 표시하는 방법을 이미 알고 있는 것 같습니다.

결국 당신은 다음과 같은 결과를 얻을 것입니다

임무 완수!

방금 AJAX 🚀🚀를 사용하여 Django 양식을 게시하는 방법을 배웠습니다.

내 git repository에서 이 프로젝트를 복제하거나 다운로드할 수 있습니다. 트위터와 인스타그램에서 저를 팔로우하고 지원하는 것을 잊지 마세요. Reverse Astronauts 커뮤니티에 가입하세요!👨‍🚀 다음 튜토리얼에서 만나요!


.ltag__tag__id__446 .follow-action-button{
배경색: #103e2e !중요;
색상: #ffffff !중요;
border-color: #103e2e !중요;
}

# 따르다

Django는 빠른 개발과 깨끗하고 실용적인 디자인을 장려하는 고급 Python 웹 프레임워크입니다. 숙련된 개발자가 구축하여 웹 개발의 많은 번거로움을 처리하므로 바퀴를 다시 발명할 필요 없이 앱 작성에 집중할 수 있습니다. 무료이며 오픈 소스입니다.