应用 Ajax Django

Ajax est essentiellement une combinaison de techniques intégrées pour réduire le nombre de chargements de pages. Nous utilisons généralement Ajax pour atténuer l'expérience utilisateur finale. En utilisant Ajax dans Django, vous pouvez utiliser des bibliothèques Ajax telles que jQuery ou d'autres pour le faire. Par exemple, si vous souhaitez utiliser jQuery, vous devez télécharger et servir la bibliothèque sur un serveur via Apache ou un autre serveur. Ensuite, utilisez-la dans le modèle, comme pour développer une application basée sur Ajax.

Une autre méthode d'utilisation d'Ajax dans Django est d'utiliser le cadre Ajax de Django. Celui le plus couramment utilisé est django-dajax, c'est un outil puissant qui permet de représenter de manière asynchrone les logiques et de développer rapidement des applications web, en utilisant Python et presque sans code source JavaScript. Il prend en charge les quatre frameworks JavaScript les plus populaires : Prototype, jQuery, Dojo et MooTools

Utiliser Django-dajax

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

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
$ pip install django_dajax
　$ easy_install django_dajax

Cela installera automatiquement django-dajaxice, suivant django-dajaxice est requis. Ensuite, nous devons configurer Ajax et dajaxice.

在 settings.py 的 INSTALLED_APPS 选择项目添加 dajax 和 dajaxice −

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
INSTALLED_APPS　+= (
　　　　'dajaxice'
　　　　'dajax'
　)

确保在同一个 settings.py 文件，则有以下 −

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　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'

现在打开 myapp/url.py文件，确保有以下设置dajax URL和加载dajax静态js文件 −

Exemple

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
from dajaxice.core import dajaxice_autodiscover, dajaxice_config
　from django.contrib.staticfiles.urls import staticfiles_urlpatterns
　from django.conf import settings
　Ensuite, les urls de dajax :
　urlpatterns　+= patterns('',
　　　　url(r'^%s/'% settings.DAJAXICE_MEDIA_PREFIX, include('dajaxice.urls')),)
　
　urlpatterns　+= staticfiles_urlpatterns()

Nous créons un tableau simple basé sur le modèle Dreamreal pour le stocker, en utilisant Ajax (sous forme de sans rechargement).

Tout d'abord, nous devons dans myapp/Dreamreal formulaire dans form.py.

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　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)

Ensuite, nous devons dans le fichier ajax.py de l'application : myapp/ajax.py. Ici se trouve la logique pertinente, nous sauvegardons le formulaire et renvoyons le résultat de la fenêtre contextuelle -

Exemple

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　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 a été enregistré avec succès." %　
　　　　　　　　　　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()

Maintenant, créons le modèle dreamreal.html, qui contient le formulaire nécessaire -

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　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>

Ajoutons un point supplémentaire, dans la vue du modèle : myapp/views.py −

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
def dreamreal(request):
　　　　form = DreamrealForm()
　　　　return render(request, 'dreamreal.html', locals())

Ajoutez l'adresse URL correspondante : myapp/urls.py −

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
url(r'^dreamreal/', 'dreamreal', name = 'dreamreal'),

Ajoutez maintenant le code nécessaire dans le modèle pour que Ajax fonctionne -

Ajoutez le code nécessaire en haut du fichier -

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
{% load static %}
　{% load dajaxice_templatetags %}

Ajoutez le code suivant dans la partie <head> du modèle dreamreal.html　-

Nous utilisons la bibliothèque JQuery pour cet exemple, donc nous ajoutons le code suivant -

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　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>

点击将会调用 Ajax 函数−

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
<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 静态文件的静态目录服务，运行　-

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　fr.oldtoolbag.com
#　Date　:　2020-08-08
$python　manage.py　collectstatic

注　-　有时 jquery.dajax.core.js 可以缺失，如果出现这种情况，只需下载源代码并把它放在静态文件夹中。

访问将能看到下面的画面，　/myapp/dreamreal/ −

在提交后，将得到以下显示画面　−

入门快速 Django RSS Django

Tutoriel Django

应用 Ajax Django

Utiliser Django-dajax