Ajax를 Django 애플리케이션과 통합하려면 어떻게 해야 합니까?
장고는 처음이고 아약스는 처음입니다.저는 두 가지를 통합해야 하는 프로젝트를 진행하고 있습니다.나는 그 둘의 이면에 있는 원칙은 이해한다고 생각하지만, 그 둘을 합친 좋은 설명은 찾지 못했다.
누가 코드베이스가 어떻게 바뀌어야 하는지 간단히 설명해 줄 수 있나요?
를 들어, 아직 할 수 것은 「 」 「 」 「 」 「 」 「 」 「 」 「 。HttpResponse아약스?만약 그렇다면, 요청에 대한 답변이 어떻게 바뀌어야 하는지 예를 들어 주시겠습니까?가 있다면, 입니다.
SO 정신은 아니지만 처음 시작할 때 같은 문제를 겪었기 때문에 이 질문을 매우 좋아합니다. 간단한 가이드를 드리겠습니다.분명히 당신은 그들의 이면에 있는 원칙을 이해하지 못합니다(그것을 불쾌하게 여기지 마세요, 하지만 만약 그랬다면 당신은 묻지 않을 것입니다).
장고는 서버 쪽입니다.즉, 클라이언트가 URL에 접속했을 경우, 그 안에 함수가 있습니다.views표시되는 내용을 렌더링하고 HTML로 응답을 반환합니다.하다
views.py:
def hello(request):
return HttpResponse('Hello World!')
def home(request):
return render_to_response('index.html', {'variable': 'world'})
index.syslog:
<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/home will will will 。index.html모든 변수를 원하는 대로 치환합니다(이러한 내용은 이미 알고 있을 것입니다).
이제 AJAX에 대해 이야기해 보겠습니다.AJAX 콜은 비동기 요구를 실행하는 클라이언트 측 코드입니다.복잡한 것처럼 들리지만, 단순히 백그라운드에서 요청을 한 후 응답을 처리한다는 의미입니다.따라서, URL 에 대해서 AJAX 를 호출하면, 유저가 그 장소에 액세스 했을 때와 같은 데이터를 얻을 수 있습니다.
를 들어 "AJAX"에 대한 AJAX 콜입니다.127.0.0.1:8000/hello이치자바스크립트이치노
$.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');
}
});
일반적인 프로세스는 다음과 같습니다.
- 은, URL 「URL」로됩니다.
127.0.0.1:8000/hello네, 이렇게요. - 성공했을 경우(상태 코드 200), 성공을 위한 기능을 실행해 수신한 데이터를 알립니다.
- 실패했을 경우는, 다른 기능을 실행합니다.
제제여 기슨 ?슨? ?? ????' 월드헬로 월드'가 포함된 알림이 표시됩니다.AJAX?', '알림하다', '알림하다', '알림하다'가 .<h1>Hello world, welcome to my awesome site</h1>.
즉, AJAX 콜에 대해서는 새로운 것이 없습니다.그것들은 사용자가 페이지를 떠나지 않고 데이터와 정보를 얻을 수 있도록 하는 방법일 뿐이며, 당신의 웹 사이트를 부드럽고 깔끔하게 디자인할 수 있습니다.주의할 필요가 있는 몇 가지 가이드라인은 다음과 같습니다.
- jQuery를 학습합니다.아무리 강조해도 지나치지 않습니다.수신한 데이터를 어떻게 다루는지 알기 위해서는 조금 이해해야 합니다.기본적인 자바스크립트 구문도 이해해야 합니다(파이썬에서 멀지 않은 곳에서 익숙해질 것입니다).Envato의 jQuery용 비디오 튜토리얼을 적극 추천합니다.이 튜토리얼은 훌륭하고 올바른 길로 인도해 줍니다.
- 언제 JSON을 사용해야 합니까?Django 뷰에서 전송된 데이터가 JSON에 있는 많은 예를 볼 수 있습니다.자세한 것은 말하지 않았습니다.어떻게 하는지는 중요하지 않고(해명이 풍부합니다), 언제가 더 중요하기 때문입니다.이에 대한 답은 JSON 데이터가 직렬화된 데이터입니다.즉, 사용자가 조작할 수 있는 데이터입니다.앞서 설명한 바와 같이 AJAX 콜은 사용자가 직접 응답한 것처럼 응답을 가져옵니다.모든 html을 망치고 싶지 않고 데이터(개체 목록)를 보내고 싶다고 합니다.JSON은 오브젝트로 송신하기 때문에(JSON 데이터는 python 사전처럼 보인다), 그것을 반복하거나 불필요한 html을 걸러낼 필요가 없는 다른 작업을 할 수 있습니다.
- 마지막에 추가해 주세요.당신이 웹 앱을 만들고 AJAX를 구현하고 싶을 때, 당신이 원하는 대로 하세요.우선 앱 전체를 AJAX 없이 빌드합니다.모든 것이 제대로 작동하는지 확인합니다.그런 다음 AJAX 콜 쓰기를 시작합니다.그것은 당신에게도 많은 것을 배우는데 도움이 되는 좋은 과정입니다.
- Chrome의 개발자 도구를 사용합니다.AJAX 콜은 백그라운드에서 이루어지기 때문에 디버깅이 매우 어려울 수 있습니다.크롬 현상 도구(또는 firebug와 같은 유사한 도구)를 사용해야 합니다.
console.log디버깅할 것.자세한 설명은 안 할 테니 검색해서 알아보세요.그것은 당신에게 매우 도움이 될 것입니다. - CSRF 인식마지막으로, Django의 투고 요청은
csrf_tokenAJAX 콜에서는 페이지를 갱신하지 않고 데이터를 송신하고 싶은 경우가 많습니다.당신은 아마 그것을 마침내 기억하기 전에 문제에 직면할 것입니다 -잠깐만요, 당신은 그것을 보내는 것을 잊었습니다.csrf_token이것은 AJAX-Dango 통합에서 알려진 초보적인 장애물이지만, 멋진 플레이를 할 수 있는 방법을 배운 후에는 매우 간단합니다.
생각나는 건 그것뿐이에요방대한 주제이긴 하지만, 아마도 충분한 예가 없을 겁니다.거기까지 가서 천천히 해, 결국엔 알게 될 거야.
또, yuvi의 훌륭한 답변으로부터, Django(사용하는 js 이외)에 있어서의 대처 방법에 대해, 작은 구체적인 예를 추가하고 싶습니다.이 예에서는,AjaxableResponseMixin작성자 모델을 상정하고 있습니다.
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']
출처 : 장고 문서, 클래스 베이스 뷰를 사용한 폼 처리
버전 1.6의 Django 링크는 버전 1.11로 업데이트되어 사용할 수 없습니다.
제가 이 글을 쓰는 이유는 받아들여진 답변이 꽤 오래되어서 리프레셔가 필요하기 때문입니다.
2019년에 Ajax를 Django와 통합하는 방법:) 그리고 Ajax가 필요한 실제 예를 들어보자:-
등록된 사용자 이름을 가진 모델이 있다고 칩시다.Ajax의 도움을 받아 지정된 사용자 이름이 존재하는지 알고 싶습니다.
html:
<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); }
);
});
urls.py:
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'),
]
views.py:
def username_exists(request):
data = {'msg':''}
if request.method == 'GET':
username = request.GET.get('username').lower()
exists = Usernames.objects.filter(name=username).exists()
data['msg'] = username
data['msg'] += ' already exists.' if exists else ' does not exists.'
return JsonResponse(data)
또한 render_to_response는 사용되지 않고 렌더로 대체되었으며 HttpResponse 대신 Django 1.7 이후부터는 jsonResponse를 사용하여 Ajax 응답을 수행합니다.JSON 인코더가 포함되어 있기 때문에 응답 오브젝트를 반환하기 전에 데이터를 시리얼화할 필요는 없습니다.HttpResponse는 권장되지 않습니다.
심플하고 좋다.당신은 당신의 견해를 바꿀 필요가 없어요.Bjax가 당신의 모든 링크를 처리합니다.이것 좀 봐: Bjax
사용방법:
<script src="bjax.min.js" type="text/javascript"></script>
<link href="bjax.min.css" rel="stylesheet" type="text/css" />
마지막으로 html의 HEAD에 다음 내용을 포함합니다.
$('a').bjax();
비동기 작업을 수행하려면 AJAX가 가장 좋습니다.비동기 호출은 모든 웹 사이트 건물에서 일반적으로 사용됩니다.Jango에서 AJAX를 구현하는 방법에 대해 간단한 예를 들어보겠습니다.javascript를 적게 쓰려면 jQuery를 사용해야 합니다.
이것은 가장 간단한 예시로, AJAX의 기본과 Django에서의 구현에 대해 설명하기 위해 사용하는 Contact 예제입니다.이 예에서는 POST 요구를 실시합니다.이 투고의 예 중 하나인 https://djangopy.org/learn/step-up-guide-to-implement-ajax-in-django을 팔로우하고 있습니다.
models.py
먼저 기본적인 세부사항을 가진 Contact 모델을 만들어 보겠습니다.
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
forms.py
위 모델에 대한 양식을 만듭니다.
from django import forms
from .models import Contact
class ContactForm(forms.ModelForm):
class Meta:
model = Contact
exclude = ["timestamp", ]
views.py
뷰는 기본 함수 기반 생성 뷰와 비슷하지만 렌더링과 함께 반환되는 대신 JsonResponse 응답을 사용합니다.
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)
urls.py
위 뷰의 루트를 작성하겠습니다.
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'),
]
템플릿
프런트 엔드 섹션으로 이동하여 위에서 작성한 폼태그와 함께 csrf_token 및 submit 버튼을 렌더링합니다.jquery 라이브러리는 포함되어 있습니다.
<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>
자바스크립트
이제 javascript 부분에 대해 이야기하겠습니다, 제출 양식에서는 POST 타입의 Ajax 요청을 하고 폼 데이터를 가져와서 서버 측에 송신하고 있습니다.
$("#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)
}
});
});
이것은 django를 사용한AJAX를 시작하기 위한 기본적인 예에 불과합니다.여러 가지 예를 더 자세히 알아보려면 다음 문서를 참조하십시오.https://djangopy.org/learn/step-up-guide-to-implement-ajax-in-django
Django를 사용한 간단한 Ajax 통화
26.10.199)
내 생각에 이것은 정답보다 훨씬 더 명확하고 간단하다."csrftoken" "login_required" "ajax" "csrftoken" "login_required" "Ajax" "csrftoken" 입니다.
뷰
@login_required
def some_view(request):
"""Returns a json response to an ajax call. (request.user is available in view)"""
# Fetch the attributes from the request body
data_attribute = request.GET.get('some_attribute') # Make sure to use POST/GET correctly
# DO SOMETHING...
return JsonResponse(data={}, status=200)
urls.py
urlpatterns = [
path('some-view-does-something/', views.some_view, name='doing-something'),
]
Ajax 콜
Ajax 콜은 매우 간단하지만 대부분의 경우 충분합니다.일부 값을 가져와 데이터 객체에 넣을 수 있습니다. 그런 다음 위의 보기에서 해당 이름을 통해 해당 값을 다시 가져올 수 있습니다.
csrftoken 함수는 django 문서에서 찾을 수 있습니다.기본적으로 복사하고 csrftoken 변수가 정의되도록 Ajax 콜 전에 렌더링해야 합니다.
$.ajax({
url: "{% url 'doing-something' %}",
headers: {'X-CSRFToken': csrftoken},
data: {'some_attribute': some_value},
type: "GET",
dataType: 'json',
success: function (data) {
if (data) {
console.log(data);
// call function to do something with data
process_data_function(data);
}
}
});
Ajax를 사용하여 현재 페이지에 HTML 추가
이것은 다소 주제에서 벗어났을 수도 있지만, 저는 이것을 거의 사용하지 않았습니다.또한 창 재배치 및 Javascript에서의 수동 html 문자열 작성을 최소화하는 좋은 방법입니다.
이것은 위와 매우 유사하지만 이번에는 현재 창을 새로고침하지 않고 응답에서 html을 렌더링합니다.
Ajax 호출에 대한 응답으로 수신되는 데이터로부터 어떤 종류의 html을 렌더링하는 경우, JsonResponse 대신 뷰에서HttpResponse를 반환하는 것이 더 쉬울 수 있습니다.이를 통해 쉽게 html을 만들 수 있으며, 이 html을 요소에 삽입할 수 있습니다.
뷰
# The login required part is of course optional
@login_required
def create_some_html(request):
"""In this particular example we are filtering some model by a constraint sent in by
ajax and creating html to send back for those models who match the search"""
# Fetch the attributes from the request body (sent in ajax data)
search_input = request.GET.get('search_input')
# Get some data that we want to render to the template
if search_input:
data = MyModel.objects.filter(name__contains=search_input) # Example
else:
data = []
# Creating an html string using template and some data
html_response = render_to_string('path/to/creation_template.html', context = {'models': data})
return HttpResponse(html_response, status=200)
보기용 html 생성 템플릿
creation_creating.syslogs
{% for model in models %}
<li class="xyz">{{ model.name }}</li>
{% endfor %}
urls.py
urlpatterns = [
path('get-html/', views.create_some_html, name='get-html'),
]
메인 템플릿과 에이잭스콜
데이터를 추가할 템플릿입니다.특히 이 예에서는 검색 입력과 검색 입력 값을 뷰로 전송하는 버튼이 있습니다.그런 다음 뷰는 요소 내에서 렌더링할 수 있는 검색과 일치하는 데이터를 표시하는 HttpResponse를 다시 보냅니다.
{% extends 'base.html' %}
{% load static %}
{% block content %}
<input id="search-input" placeholder="Type something..." value="">
<button id="add-html-button" class="btn btn-primary">Add Html</button>
<ul id="add-html-here">
<!-- This is where we want to render new html -->
</ul>
{% end block %}
{% block extra_js %}
<script>
// When button is pressed fetch inner html of ul
$("#add-html-button").on('click', function (e){
e.preventDefault();
let search_input = $('#search-input').val();
let target_element = $('#add-html-here');
$.ajax({
url: "{% url 'get-html' %}",
headers: {'X-CSRFToken': csrftoken},
data: {'search_input': search_input},
type: "GET",
dataType: 'html',
success: function (data) {
if (data) {
console.log(data);
// Add the http response to element
target_element.html(data);
}
}
});
})
</script>
{% endblock %}
프로젝트에서 AjaxableResponseMixin을 사용하려고 했지만 다음과 같은 오류 메시지가 표시되었습니다.
잘못 구성됨:리디렉션할 URL이 없습니다.모델에 URL을 제공하거나 get_absolute_url 메서드를 정의합니다.
이는 브라우저에 JSON 요청을 보낼 때 CreateView가 HttpResponse를 반환하는 대신 리다이렉트 응답을 반환하기 때문입니다.그래서 나는 몇 가지 변경을 가했다.AjaxableResponseMixin요구일 , Ajax는 super.form_valid 됩니다.form.save()직접적으로.
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
----------------------------
오래된 데이터를 보관하고 싶다면 Ajax 없이도 할 수 있습니다.(페이지가 갱신됩니다)
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.
또는 Ajax로 할 수 있습니다(페이지가 갱신되지 않습니다).
--------------------------
<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)
---------------------------------
Ajax를 사용하는 경우 다음 작업을 수행해야 합니다.
- URL1을 사용하여 HTML 페이지를 초기화합니다(일반적으로 Django 템플릿으로 초기화합니다).그리고 서버는 클라이언트에 html 페이지를 보냅니다.
- Ajax를 사용하여 URL2를 사용하여 서버와 통신합니다.그리고 서버는 클라이언트에 데이터 구조를 전송합니다.
장고는 아약스랑 달라요.그 이유는 다음과 같습니다.
- 고객에게 돌아오는 것은 다릅니다.장고의 경우는 HTML 페이지입니다.Ajax의 경우는 데이터 구조입니다.
- 장고는 무언가를 창조하는데 능숙하지만, 그것은 오직 한 번만 창조할 수 있고, 아무것도 바꿀 수 없다.장고는 애니메이션처럼 많은 그림으로 구성되어 있다.반면 Ajax는 만드는 데는 서툴지만 기존 html 페이지에서 변경하는 데는 능하다.
제 생각에는, 만약 당신이 어디에나 아약스를 사용하고 싶다면요.처음에 데이터로 페이지를 초기화해야 할 때, Ajax와 함께 Django를 사용할 수 있습니다.다만, 서버의 아무것도 없는 정적 페이지만 필요한 경우도 있어, Django 템플릿을 사용할 필요는 없습니다.
만약 당신이 Ajax가 베스트 프랙티스라고 생각하지 않는다면.장고템플릿을 사용하면 애니메이션 같은 모든 작업을 할 수 있습니다.
(영어가 서툴러요)
언급URL : https://stackoverflow.com/questions/20306981/how-do-i-integrate-ajax-with-django-applications
'source' 카테고리의 다른 글
| 선택된 데이터베이스를 확인하는 방법 (0) | 2022.12.28 |
|---|---|
| PHP 테스트 응용 프로그램의 Kubernetes 배포 (0) | 2022.12.28 |
| Python 요청 - 연결 어댑터 없음 (0) | 2022.12.28 |
| PHP의 NULL과 NULL의 차이 (0) | 2022.12.28 |
| Django auto_now 및 auto_now_add (0) | 2022.12.28 |