Django - Ajax

Ajax est essentiellement une combinaison de technologies qui sont intégrées ensemble pour réduire le nombre de chargements de pages. Nous utilisons généralement Ajax pour faciliter l'expérience de l'utilisateur final. Utiliser Ajax dans Django peut être fait en utilisant directement une bibliothèque Ajax comme JQuery ou autres. Supposons que vous souhaitiez utiliser JQuery, puis que vous deviez télécharger et servir la bibliothèque sur votre serveur via Apache ou autres. Ensuite, utilisez-le dans votre modèle, comme vous pourriez le faire lors du développement d'une application basée sur Ajax.

Une autre façon d'utiliser Ajax dans Django est d'utiliser le framework Django Ajax. Le plus couramment utilisé est django-dajax, un outil puissant pour développer facilement et très rapidement une logique de présentation asynchrone dans des applications Web, en utilisant Python et presque pas de code source JavaScript. Il prend en charge quatre des frameworks Ajax les plus populaires: Prototype, jQuery, Dojo et MooTools.

Utilisation de Django-dajax

La première chose à faire est d'installer django-dajax. Cela peut être fait en utilisant easy_install ou pip -

$ pip install django_dajax
$ easy_install django_dajax

Cela installera automatiquement django-dajaxice, requis par django-dajax. Nous devons ensuite configurer à la fois dajax et dajaxice.

Ajoutez dajax et dajaxice dans votre projet settings.py dans l'option INSTALLED_APPS -

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

Assurez-vous que dans le même fichier settings.py, vous disposez des éléments suivants:

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'

Allez maintenant dans le fichier myapp / url.py et assurez-vous que vous disposez des éléments suivants pour définir les URL dajax et charger les fichiers js dajax statics -

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

Créons un formulaire simple basé sur notre modèle Dreamreal pour le stocker, en utilisant Ajax (signifie pas de rafraîchissement).

Au début, nous avons besoin de notre formulaire Dreamreal dans 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)

Ensuite, nous avons besoin d'un fichier ajax.py dans notre application: myapp / ajax.py. C'est là que se trouve notre logique, c'est là que nous mettons la fonction qui va sauver notre formulaire puis retourner la popup -

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

Créons maintenant le modèle dreamreal.html, qui a notre forme -

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

Ajoutez la vue qui va avec le modèle dans myapp / views.py -

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

Ajoutez l'URL correspondante dans myapp / urls.py -

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

Ajoutons maintenant le nécessaire dans notre modèle pour faire fonctionner Ajax -

En haut du fichier, ajoutez -

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

Et dans la section <head> de notre modèle dreamreal.html, ajoutez -

Nous utilisons la bibliothèque JQuery pour cet exemple, alors ajoutez -

<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 fonction Ajax qui sera appelée au clic -

<script>

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

Notez que vous avez besoin de «jquery-1.11.3.min.js» dans votre répertoire de fichiers statiques, ainsi que de jquery.dajax.core.js. Pour vous assurer que tous les fichiers statiques dajax sont servis sous votre répertoire statique, exécutez -

$python manage.py collectstatic

Note - Parfois, le jquery.dajax.core.js peut manquer, si cela se produit, téléchargez simplement la source et prenez ce fichier et placez-le dans votre dossier statique.

Vous verrez l'écran suivant, en accédant à / myapp / dreamreal / -

Lors de la soumission, vous obtiendrez l'écran suivant -