Django - Ajax

Básicamente, Ajax es una combinación de tecnologías que se integran para reducir el número de cargas de páginas. Generalmente usamos Ajax para facilitar la experiencia del usuario final. El uso de Ajax en Django se puede hacer directamente usando una biblioteca Ajax como JQuery u otras. Digamos que desea usar JQuery, luego necesita descargar y servir la biblioteca en su servidor a través de Apache u otros. Luego úselo en su plantilla, tal como lo haría al desarrollar cualquier aplicación basada en Ajax.

Otra forma de usar Ajax en Django es usar el marco Django Ajax. El más utilizado es django-dajax, que es una herramienta poderosa para desarrollar de manera fácil y súper rápida lógica de presentación asincrónica en aplicaciones web, usando Python y casi sin código fuente JavaScript. Es compatible con cuatro de los frameworks Ajax más populares: Prototype, jQuery, Dojo y MooTools.

Usando Django-dajax

Lo primero que debe hacer es instalar django-dajax. Esto se puede hacer usando easy_install o pip -

$ pip install django_dajax
$ easy_install django_dajax

Esto instalará automáticamente django-dajaxice, requerido por django-dajax. Luego necesitamos configurar tanto dajax como dajaxice.

Agregue dajax y dajaxice en su proyecto settings.py en la opción INSTALLED_APPS -

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

Asegúrese de que en el mismo archivo settings.py tenga lo siguiente:

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'

Ahora vaya al archivo myapp / url.py y asegúrese de tener lo siguiente para configurar las URL de dajax y cargar archivos js de estadísticas de dajax:

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()

Creemos un formulario simple basado en nuestro modelo Dreamreal para almacenarlo, usando Ajax (significa que no hay actualización).

Al principio, necesitamos nuestra forma Dreamreal en myapp / form.py.

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)

Entonces necesitamos un archivo ajax.py en nuestra aplicación: myapp / ajax.py. Ahí es donde está nuestra lógica, ahí es donde colocamos la función que guardará nuestro formulario y luego devolvemos la ventana emergente -

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()

Ahora creemos la plantilla dreamreal.html, que tiene nuestro formulario:

<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>

Agregue la vista que acompaña a la plantilla en myapp / views.py -

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

Agregue la URL correspondiente en myapp / urls.py -

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

Ahora agreguemos lo necesario en nuestra plantilla para que el Ajax funcione:

En la parte superior del archivo, agregue -

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

Y en la sección <head> de nuestra plantilla dreamreal.html agregue:

Estamos usando la biblioteca JQuery para este ejemplo, así que agregue -

<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>

La función Ajax que se llamará al hacer clic -

<script>

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

Tenga en cuenta que necesita "jquery-1.11.3.min.js" en su directorio de archivos estáticos, y también jquery.dajax.core.js. Para asegurarse de que todos los archivos estáticos de dajax se sirvan en su directorio estático, ejecute -

$python manage.py collectstatic

Note - A veces el jquery.dajax.core.js puede faltar, si eso sucede, simplemente descargue la fuente y tome ese archivo y colóquelo en su carpeta estática.

Podrás ver la siguiente pantalla, al acceder a / myapp / dreamreal / -

Al enviar, obtendrá la siguiente pantalla:

↰ Previous page