Applicazioni Ajax di Django

Ajax è in realtà una combinazione di tecnologie integrate per ridurre il numero di caricamenti della pagina. Di solito usiamo Ajax per mitigare l'esperienza utente finale. In Django, l'Ajax può essere utilizzato direttamente tramite librerie Ajax come jQuery o altre. Ad esempio, se si desidera utilizzare jQuery, è necessario scaricare e servire la libreria tramite un server come Apache o altri. Poi utilizzarla nei modelli, come sviluppare un'applicazione basata su Ajax.

Un altro metodo per utilizzare Ajax in Django è utilizzare il framework Ajax di Django. Il più comune è django-dajax, uno strumento potente che permette di rappresentare logicamente in modo asincrono e sviluppare rapidamente applicazioni web, utilizzando Python e quasi senza codice JavaScript di origine. Supporta quattro delle quattro principali librerie JavaScript: Prototype, jQuery, Dojo e MooTools

Usare Django-dajax

La prima cosa da fare è installare django-dajax. Questo può essere fatto utilizzando easy_install o pip.

# Nome del file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 2020-08-08
$ pip install django_dajax
　$ easy_install django_dajax

Questo installerà automaticamente django-dajax, seguendo le richieste di django-dajax. Poi, dobbiamo configurare Ajax e dajaxice.

Aggiungi dajax e dajaxice nella sezione INSTALLED_APPS di settings.py

# Nome del file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 2020-08-08
INSTALLED_APPS += (
　　　　'dajaxice'
　　　　'dajax'
　)

Assicurati che nel medesimo file settings.py, ci siano le seguenti impostazioni: −

# Nome del file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 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'

Ora apri il file myapp/url.py e assicurati di avere le seguenti impostazioni: URL di dajax e caricamento dei file js statici di dajax −

# Nome del file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 2020-08-08
from dajaxice.core import dajaxice_autodiscover, dajaxice_config
　from django.contrib.staticfiles.urls import staticfiles_urlpatterns
　from django.conf import settings
　Poi, le url di dajax:
　urlpatterns += patterns('',
　　　　url(r'^%s/' % settings.DAJAXICE_MEDIA_PREFIX, include('dajaxice.urls')),)
　
　urlpatterns += staticfiles_urlpatterns()

Creiamo un semplice tabella basato sul modello Dreamreal per memorizzarlo, utilizzando Ajax (indicazione di aggiornamento senza ricarica della pagina).

Prima di tutto, dobbiamo aggiungere il modulo Dreamreal in myapp/form.py.

# Nome del file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 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)

Poi, dobbiamo aggiungere il file ajax.py all'applicazione: myapp/ajax.py. Ecco la logica relativa, salviamo il modulo e mostriamo il risultato in un popup -

# Nome del file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 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 è stato salvato con successo." %　
　　　　　　　　　　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()

Ora, creiamo il template dreamreal.html che contiene il modulo necessario -

# Nome del file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 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>

Aggiungi un dettaglio, nel file vista del template: myapp/views.py -

# Nome del file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 2020-08-08
def dreamreal(request):
　　　　form = DreamrealForm()
　　　　return render(request, 'dreamreal.html', locals())

Aggiungi l'indirizzo web corrispondente: myapp/urls.py -

# Nome del file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 2020-08-08
url(r'^dreamreal/', 'dreamreal', name = 'dreamreal'),

Ora aggiungi il codice necessario nel template per far funzionare Ajax -

Aggiungi il seguente codice all'inizio del file -

# Nome del file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 2020-08-08
{% load static %}
　{% load dajaxice_templatetags %}

Aggiungi il seguente codice nel sezione <head> del template dreamreal.html -

Utilizziamo la libreria jQuery per questo esempio, quindi aggiungiamo il seguente codice -

# Nome del file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 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>

Cliccando verrà chiamata la funzione Ajax -

# Nome del file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 2020-08-08
<script>
　　　　function send_form(){
　　　　　　　Dajaxice.myapp.send_form(Dajax.process,{'form':$('#my_form').serialize(true)});
　　　　}
　</script>

Attenzione, è necessario aggiungere 'jquery-1.11.3.min.js' nella directory dei file statici, che è anche 'jquery.dajax.core.js'. Per garantire che venga servito il percorso statico di tutti i file statici di dajax, eseguire -

# Nome del file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 2020-08-08
$python manage.py collectstatic

Nota - A volte jquery.dajax.core.js può essere mancante, se si verifica questa situazione, è sufficiente scaricare il codice sorgente e metterlo nella cartella statica.

L'accesso vedrà la seguente schermata, /myapp/dreamreal/ -

Dopo la presentazione, apparirà la seguente schermata di visualizzazione -