应用 Ajax Django

Ajax básicamente es una combinación de tecnologías integradas para reducir la cantidad de carga de la página. Usualmente usamos Ajax para aliviar la experiencia del usuario final. En Django, se puede usar Ajax directamente con bibliotecas como jQuery u otras. Por ejemplo, si quieres usar jQuery, necesitas descargar y servir la biblioteca en un servidor a través de Apache u otro servidor. Luego, úsala en las plantillas, como si estuvieras desarrollando una aplicación basada en Ajax.

Otra manera de usar Ajax en Django es mediante el framework Ajax de Django. El más común es django-dajax, una herramienta poderosa que permite representar lógica de manera asincrónica y desarrollar aplicaciones web rápidamente, utilizando Python y prácticamente sin código JavaScript. Soporta cuatro de los frameworks js más populares: Prototype, jQuery, Dojo y MooTools

Usar Django-dajax

Lo primero que hay que hacer es instalar django-dajax. Esto se puede hacer utilizando easy_install o pid -

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
$ pip install django_dajax
　$ easy_install django_dajax

Esto se instalará automáticamente django-dajaxice, según django-dajaxice se requiere. Luego, necesitamos configurar Ajax y dajaxice.

Añade dajax y dajaxice en la sección INSTALLED_APPS del archivo settings.py −

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
INSTALLED_APPS　+= (
　　　　'dajaxice',
　　　　'dajax'
　)

Asegúrate de que en el mismo archivo settings.py, tenga lo siguiente −

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
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 abre myapp/url.py archivo, asegúrate de tener la siguiente configuración: dajax URL y carga de archivos js estáticos dajax −

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
from dajaxice.core import dajaxice_autodiscover, dajaxice_config
　from django.contrib.staticfiles.urls import staticfiles_urlpatterns
　from django.conf import settings
　Entonces, las URLs de dajax:
　urlpatterns　+= patterns('',
　　　　url(r'^%s/'% settings.DAJAXICE_MEDIA_PREFIX, include('dajaxice.urls')),)
　
　urlpatterns　+= staticfiles_urlpatterns()

Creamos una tabla simple basada en el modelo Dreamreal para almacenarla, utilizando Ajax (sin recarga de página).

Primero, necesitamos en myapp/Dreamreal formulario en form.py.

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
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)

Luego, necesitamos en el archivo ajax.py de la aplicación: myapp/ajax.py. Aquí está la lógica relevante, guardamos el formulario y luego devolvemos el resultado emergente -

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
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 se guardó correctamente." %　
　　　　　　　　　　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 el patrón dreamreal.html, que contiene el formulario necesario -

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
<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>

Añadir un punto, en la vista de plantilla: myapp/views.py -

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
def dreamreal(request):
　　　　form = DreamrealForm()
　　　　return render(request, 'dreamreal.html', locals())

Agregar la URL correspondiente: myapp/urls.py -

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
url(r'^dreamreal/', 'dreamreal', name = 'dreamreal'),

Ahora, agrega el código necesario en el patrón para que Ajax funcione -

Agregar el código necesario en la parte superior del archivo -

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
{% load static %}
　{% load dajaxice_templatetags %}

Agregar en la sección <head> del archivo dreamreal.html　-

Usamos la biblioteca JQuery para este ejemplo, por lo que se agrega el siguiente código -

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
<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>

Hacer clic llamará a la función Ajax−

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
<script>
　　　　function send_form(){
　　　　　　　Dajaxice.myapp.send_form(Dajax.process,{'form':$('#my_form').serialize(true)});
　　　　}
　</script>

Tenga en cuenta que es necesario agregar "jquery-1.11.3.min.js　-

# Nombre de archivo: example.py
# Derechos de autor:　2020 Por w3codebox
# Autor por: es.oldtoolbag.com
# Fecha:　2020-08-08
$python manage.py collectstatic

Nota　-　A veces puede faltar jquery.dajax.core.js, si ocurre este caso, simplemente descargue el código fuente y colóquelo en la carpeta estática.

El acceso mostrará la siguiente imagen:　/myapp/dreamreal/ −

Después de enviar, se mostrará la siguiente imagen: