장고-Ajax

Ajax는 기본적으로 페이지로드 수를 줄이기 위해 함께 통합 된 기술의 조합입니다. 우리는 일반적으로 Ajax를 사용하여 최종 사용자 경험을 용이하게합니다. Django에서 Ajax를 사용하는 것은 JQuery 또는 기타와 같은 Ajax 라이브러리를 직접 사용하여 수행 할 수 있습니다. JQuery를 사용하려는 경우 Apache 또는 기타를 통해 서버에 라이브러리를 다운로드하고 제공해야합니다. 그런 다음 Ajax 기반 애플리케이션을 개발할 때와 마찬가지로 템플릿에서 사용합니다.

Django에서 Ajax를 사용하는 또 다른 방법은 Django Ajax 프레임 워크를 사용하는 것입니다. 가장 일반적으로 사용되는 것은 django-dajax로, Python을 사용하고 JavaScript 소스 코드를 거의 사용하지 않고 웹 애플리케이션에서 비동기 프리젠 테이션 논리를 쉽고 빠르게 개발할 수있는 강력한 도구입니다. 가장 인기있는 4 가지 Ajax 프레임 워크 인 Prototype, jQuery, Dojo 및 MooTools를 지원합니다.

Django-dajax 사용

가장 먼저 할 일은 django-dajax를 설치하는 것입니다. easy_install 또는 pip를 사용하여 수행 할 수 있습니다.

$ pip install django_dajax
$ easy_install django_dajax

그러면 django-dajax에 필요한 django-dajaxice가 자동으로 설치됩니다. 그런 다음 dajax와 dajaxice를 모두 구성해야합니다.

INSTALLED_APPS 옵션의 프로젝트 settings.py에 dajax 및 dajaxice를 추가하십시오-

INSTALLED_APPS += (
   'dajaxice',
   'dajax'
)

동일한 settings.py 파일에 다음이 있는지 확인하십시오.

TEMPLATE_LOADERS = (
   'django.template.loaders.filesystem.Loader',
   'django.template.loaders.app_directories.Loader',
   'django.template.loaders.eggs.Loader',
)

TEMPLATE_CONTEXT_PROCESSORS = (
   'django.contrib.auth.context_processors.auth',
   'django.core.context_processors.debug',
   'django.core.context_processors.i18n',
   'django.core.context_processors.media',
   'django.core.context_processors.static',
   'django.core.context_processors.request',
   'django.contrib.messages.context_processors.messages'
)

STATICFILES_FINDERS = (
   'django.contrib.staticfiles.finders.FileSystemFinder',
   'django.contrib.staticfiles.finders.AppDirectoriesFinder',
   'dajaxice.finders.DajaxiceFinder',
)

DAJAXICE_MEDIA_PREFIX = 'dajaxice'

이제 myapp / url.py 파일로 이동하여 dajax URL을 설정하고 dajax statics js 파일을로드하려면 다음이 있는지 확인하십시오.

from dajaxice.core import dajaxice_autodiscover, dajaxice_config
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf import settings

Then dajax urls:

urlpatterns += patterns('',
   url(r'^%s/' % settings.DAJAXICE_MEDIA_PREFIX, include('dajaxice.urls')),)
	
urlpatterns += staticfiles_urlpatterns()

Ajax를 사용하여 Dreamreal 모델을 기반으로 간단한 양식을 만들어 저장해 보겠습니다 (새로 고침 없음).

처음에는 myapp / form.py에 Dreamreal 양식이 필요합니다.

class DreamrealForm(forms.Form):
   website = forms.CharField(max_length = 100)
   name = forms.CharField(max_length = 100)
   phonenumber = forms.CharField(max_length = 50)
   email = forms.CharField(max_length = 100)

그런 다음 애플리케이션에 ajax.py 파일이 필요합니다 : myapp / ajax.py. 그것이 우리의 논리가있는 곳입니다. 양식을 저장할 함수를 넣은 다음 팝업을 반환합니다.

from dajaxice.utils import deserialize_form
from myapp.form import DreamrealForm
from dajax.core import Dajax
from myapp.models import Dreamreal

@dajaxice_register
def send_form(request, form):
   dajax = Dajax()
   form = DreamrealForm(deserialize_form(form))
   
   if form.is_valid():
      dajax.remove_css_class('#my_form input', 'error')
      dr = Dreamreal()
      dr.website = form.cleaned_data.get('website')
      dr.name = form.cleaned_data.get('name')
      dr.phonenumber = form.cleaned_data.get('phonenumber')
      dr.save()
      
      dajax.alert("Dreamreal Entry %s was successfully saved." % 
         form.cleaned_data.get('name'))
   else:
      dajax.remove_css_class('#my_form input', 'error')
      for error in form.errors:
         dajax.add_css_class('#id_%s' % error, 'error')
			
   return dajax.json()

이제 우리의 형식을 가진 dreamreal.html 템플릿을 만들어 보겠습니다.

<html>
   <head></head>
   <body>
   
      <form action = "" method = "post" id = "my_form" accept-charset = "utf-8">
         {{ form.as_p }}
         <p><input type = "button" value = "Send" onclick = "send_form();"></p>
      </form>
      
   </body>
</html>

myapp / views.py에 템플릿과 함께 제공되는보기를 추가합니다.

def dreamreal(request):
   form = DreamrealForm()
   return render(request, 'dreamreal.html', locals())

myapp / urls.py에 해당 URL을 추가하십시오-

url(r'^dreamreal/', 'dreamreal', name = 'dreamreal'),

이제 Ajax가 작동하도록 템플릿에 필요한 사항을 추가해 보겠습니다.

파일 상단에 추가-

{% load static %}
{% load dajaxice_templatetags %}

그리고 dreamreal.html 템플릿의 <head> 섹션에 다음을 추가합니다.

이 예제에서는 JQuery 라이브러리를 사용하고 있으므로 다음을 추가하십시오.

<script src = "{% static '/static/jquery-1.11.3.min.js' %}" 
   type = "text/javascript" charset = "utf-8"></script>
<script src = "{% static '/static/dajax/jquery.dajax.core.js' %}"></script>

클릭시 호출 될 Ajax 함수-

<script>

   function send_form(){
      Dajaxice.myapp.send_form(Dajax.process,{'form':$('#my_form').serialize(true)});
   }
</script>

정적 파일 디렉토리에 "jquery-1.11.3.min.js"와 jquery.dajax.core.js가 필요합니다. 모든 dajax 정적 파일이 정적 디렉토리에서 제공되는지 확인하려면 다음을 실행하십시오.

$python manage.py collectstatic

Note − 때때로 jquery.dajax.core.js가 누락 될 수 있습니다.이 경우 소스를 다운로드하고 해당 파일을 가져 와서 정적 폴더에 넣으십시오.

/ myapp / dreamreal /에 액세스하면 다음 화면이 표시됩니다. −

제출시 다음 화면이 표시됩니다.