[python] Ajax와 Django 애플리케이션을 어떻게 통합합니까?

이것이 완전히 SO 정신이 아니더라도 시작했을 때 같은 문제가 발생했기 때문에이 질문을 좋아합니다. 그래서 나는 당신에게 빠른 가이드를 줄 것입니다. 분명히 당신은 그들 뒤에있는 원칙을 이해하지 못합니다 (범죄로 생각하지 마십시오. 그렇지 않으면 요청하지 않을 것입니다).

Django는 서버 측 입니다. 즉, 클라이언트가 URL로 이동하면 내부에 함수 views를보고 HTML로 응답을 반환한다는 의미입니다. 예를 들어 보자.

views.py :

def hello(request):
    return HttpResponse('Hello World!')

def home(request):
    return render_to_response('index.html', {'variable': 'world'})

index.html :

<h1>Hello {{ variable }}, welcome to my awesome site</h1>

urls.py :

url(r'^hello/', 'myapp.views.hello'),
url(r'^home/', 'myapp.views.home'),

가장 간단한 사용법의 예입니다. 간다는 것은 함수에 127.0.0.1:8000/hello대한 요청 을 의미 하며을 반환하고 요청 된대로 모든 변수를 대체합니다 (아마도 지금까지이 모든 것을 알고있을 것입니다).hello()127.0.0.1:8000/homeindex.html

이제 AJAX 에 대해 이야기 해 보자 . AJAX 호출은 비동기 요청을 수행하는 클라이언트 측 코드입니다. 복잡해 보이지만 백그라운드에서 요청을 한 다음 응답을 처리한다는 의미입니다. 따라서 일부 URL에 대해 AJAX 호출을 수행하면 사용자가 해당 위치로 갈 때와 동일한 데이터를 얻게됩니다.

예를 들어, AJAX 호출 127.0.0.1:8000/hello은 방문한 것과 동일한 것을 반환합니다. 이번에는 JavaScript 함수 안에 있으며 원하는대로 처리 할 수 ​​있습니다. 간단한 사용 사례를 살펴 보겠습니다.

$.ajax({
    url: '127.0.0.1:8000/hello',
    type: 'get', // This is the default though, you don't actually need to always mention it
    success: function(data) {
        alert(data);
    },
    failure: function(data) {
        alert('Got an error dude');
    }
}); 

일반적인 과정은 다음과 같습니다.

1. 전화는 127.0.0.1:8000/hello마치 새 탭을 열고 직접 수행 한 것처럼 URL 로 이동합니다 .
2. 성공하면 (상태 코드 200) 성공을위한 기능을 수행하면 수신 된 데이터에 경고합니다.
3. 실패하면 다른 기능을 수행하십시오.

이제 어떻게 될까요? ‘hello world’라는 경고가 표시됩니다. 집에 AJAX 통화를하면 어떻게됩니까? 똑같은 경고 메시지가 나타납니다 <h1>Hello world, welcome to my awesome site</h1>.

다시 말해 AJAX 호출에 대한 새로운 것은 없습니다. 페이지를 떠나지 않고도 사용자가 데이터와 정보를 얻을 수 있도록하는 방법 일뿐 아니라 웹 사이트를 매끄럽고 깔끔하게 디자인 할 수 있습니다. 다음 사항에 유의하십시오.

1. jQuery를 배우십시오 . 나는 이것을 충분히 강조 할 수 없다. 수신 한 데이터를 처리하는 방법을 이해하려면 약간 이해해야합니다. 또한 기본적인 JavaScript 구문을 이해해야합니다 (파이썬에서 멀지 않은 곳에 익숙해집니다). 저는 jQuery 에 대한 Envato의 비디오 자습서를 강력히 권장합니다. 훌륭하고 올바른 길로 안내 할 것입니다.
2. JSON을 언제 사용해야합니까? . Django 뷰가 보낸 데이터가 JSON 인 많은 예를 보게 될 것입니다. 나는 그것을 하는 방법 이 중요 하지 않기 때문에 (많은 설명이 풍부하며) when 훨씬 더 중요 하기 때문에 그것에 대해 자세히 설명하지 않았습니다 . 그리고 그 대답은 JSON 데이터는 직렬화 된 데이터입니다. 즉, 조작 할 수있는 데이터입니다. 앞서 언급했듯이 AJAX 호출은 사용자가 직접 수행 한 것처럼 응답을 가져옵니다. 이제 모든 HTML을 엉망으로 만들고 싶지 않고 대신 데이터 (아마도 객체 목록)를 보내려고한다고 가정하십시오. JSON은 객체 (JSON 데이터가 파이썬 사전처럼 보입니다)로 전송 한 다음이를 반복하거나 쓸모없는 html을 통해 걸러야 할 필요가없는 다른 작업을 수행 할 수 있기 때문에 좋습니다.
3. 마지막에 추가하십시오 . 웹 앱을 빌드하고 AJAX를 구현하려는 경우 자신에게 호의를 베푸십시오. 먼저 AJAX가 전혀없는 전체 앱을 빌드하십시오. 모든 것이 작동하는지 확인하십시오. 그런 다음에 만 AJAX 호출 작성을 시작하십시오. 그것은 많은 과정을 배우는 데 도움이되는 좋은 과정입니다.
4. 크롬 개발자 도구를 사용하십시오 . AJAX 호출은 백그라운드에서 수행되기 때문에 때때로 디버깅하기가 매우 어렵습니다. 크롬 개발자 도구 (또는 파이어 console.log버그 와 같은 유사한 도구)와 디버깅 할 사항을 사용해야합니다 . 나는 자세히 설명하지 않고 단지 구글을 둘러보고 그것에 대해 알아 낸다. 도움이 될 것입니다.
5. CSRF 인식 . 마지막으로 Django의 게시물 요청에는가 필요합니다 csrf_token. AJAX 호출을 사용하면 페이지를 새로 고치지 않고 데이터를 여러 번 보내려고합니다. 당신은 아마 그것을 기억하기 전에 약간의 어려움에 직면하게 될 것입니다-기다리십시오 csrf_token. 이것은 AJAX-Django 통합에서 알려진 초보로드 블록이지만 잘 재생하는 방법을 배우면 파이처럼 쉽습니다.

그것이 내 머리에 오는 모든 것입니다. 그것은 광대 한 주제이지만, 아마도 충분한 예가 없을 것입니다. 천천히 길을 따라 가십시오. 서서히 얻을 것입니다.

답변

import json

from django.http import HttpResponse
from django.views.generic.edit import CreateView
from myapp.models import Author

class AjaxableResponseMixin(object):
    """
    Mixin to add AJAX support to a form.
    Must be used with an object-based FormView (e.g. CreateView)
    """
    def render_to_json_response(self, context, **response_kwargs):
        data = json.dumps(context)
        response_kwargs['content_type'] = 'application/json'
        return HttpResponse(data, **response_kwargs)

    def form_invalid(self, form):
        response = super(AjaxableResponseMixin, self).form_invalid(form)
        if self.request.is_ajax():
            return self.render_to_json_response(form.errors, status=400)
        else:
            return response

    def form_valid(self, form):
        # We make sure to call the parent's form_valid() method because
        # it might do some processing (in the case of CreateView, it will
        # call form.save() for example).
        response = super(AjaxableResponseMixin, self).form_valid(form)
        if self.request.is_ajax():
            data = {
                'pk': self.object.pk,
            }
            return self.render_to_json_response(data)
        else:
            return response

class AuthorCreate(AjaxableResponseMixin, CreateView):
    model = Author
    fields = ['name']

<p id="response_msg"></p>
<form id="username_exists_form" method='GET'>
      Name: <input type="username" name="username" />
      <button type='submit'> Check </button>
</form>   

$('#username_exists_form').on('submit',function(e){
    e.preventDefault();
    var username = $(this).find('input').val();
    $.get('/exists/',
          {'username': username},
          function(response){ $('#response_msg').text(response.msg); }
    );
}); 

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('exists/', views.username_exists, name='exists'),
]

def username_exists(request):
    data = {'msg':''}
    if request.method == 'GET':
        username = request.GET.get('username').lower()
        exists = Usernames.objects.filter(name=username).exists()
        if exists:
            data['msg'] = username + ' already exists.'
        else:
            data['msg'] = username + ' does not exists.'
    return JsonResponse(data)

<script src="bjax.min.js" type="text/javascript"></script>
<link href="bjax.min.css" rel="stylesheet" type="text/css" />

$('a').bjax();

from django.db import models

class Contact(models.Model):
    name = models.CharField(max_length = 100)
    email = models.EmailField()
    message = models.TextField()
    timestamp = models.DateTimeField(auto_now_add = True)

    def __str__(self):
        return self.name

from django import forms
from .models import Contact

class ContactForm(forms.ModelForm):
    class Meta:
        model = Contact
        exclude = ["timestamp", ]

from django.http import JsonResponse
from .forms import ContactForm

def postContact(request):
    if request.method == "POST" and request.is_ajax():
        form = ContactForm(request.POST)
        form.save()
        return JsonResponse({"success":True}, status=200)
    return JsonResponse({"success":False}, status=400)

from django.contrib import admin
from django.urls import path
from app_1 import views as app1

urlpatterns = [
    path('ajax/contact', app1.postContact, name ='contact_submit'),
]

<form id = "contactForm" method= "POST">{% csrf_token %}
   {{ contactForm.as_p }}
  <input type="submit" name="contact-submit" class="btn btn-primary" />
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$("#contactForm").submit(function(e){
    // prevent from normal form behaviour
        e.preventDefault();
        // serialize the form data
        var serializedData = $(this).serialize();
        $.ajax({
            type : 'POST',
            url :  "{% url 'contact_submit' %}",
            data : serializedData,
            success : function(response){
            //reset the form after successful submit
                $("#contactForm")[0].reset();
            },
            error : function(response){
                console.log(response)
            }
        });
   });

from django.http import JsonResponse
from django import forms
from django.db import models

class AjaxableResponseMixin(object):
    success_return_code = 1
    error_return_code = 0
    """
    Mixin to add AJAX support to a form.
    Must be used with an object-based FormView (e.g. CreateView)
    """
    def form_invalid(self, form):
        response = super(AjaxableResponseMixin, self).form_invalid(form)
        if self.request.is_ajax():
            form.errors.update({'result': self.error_return_code})
            return JsonResponse(form.errors, status=400)
        else:
            return response

    def form_valid(self, form):
        # We make sure to call the parent's form_valid() method because
        # it might do some processing (in the case of CreateView, it will
        # call form.save() for example).
        if self.request.is_ajax():
            self.object = form.save()
            data = {
                'result': self.success_return_code
            }
            return JsonResponse(data)
        else:
            response = super(AjaxableResponseMixin, self).form_valid(form)
            return response

class Product(models.Model):
    name = models.CharField('product name', max_length=255)

class ProductAddForm(forms.ModelForm):
    '''
    Product add form
    '''
    class Meta:
        model = Product
        exclude = ['id']


class PriceUnitAddView(AjaxableResponseMixin, CreateView):
    '''
    Product add view
    '''
    model = Product
    form_class = ProductAddForm

Server ===> Client(Browser)
      Send a page

When you click button and send the form,
----------------------------
Server <=== Client(Browser)
      Give data back. (data in form will be lost)
Server ===> Client(Browser)
      Send a page after doing sth with these data
----------------------------

Server ===> Client(Browser)
      Send a page
Server <=== Client(Browser)
      Give data back. (data in form will be lost)
Server ===> Client(Browser)
      1. Send a page after doing sth with data
      2. Insert data into form and make it like before.
      After these thing, server will send a html page to client. It means that server do more work, however, the way to work is same.

--------------------------
<Initialization>
Server ===> Client(Browser) [from URL1]
      Give a page
--------------------------
<Communication>
Server <=== Client(Browser)
      Give data struct back but not to refresh the page.
Server ===> Client(Browser) [from URL2]
      Give a data struct(such as JSON)
---------------------------------