Django Ajax 应用

Ajax ist im Grunde eine Kombination von Technologien, die integriert sind, um die Anzahl der Seitenlast zu reduzieren. Wir verwenden Ajax in der Regel, um die Endbenutzererfahrung zu mildern. In Django kann Ajax direkt mit Ajax-Bibliotheken wie jQuery oder anderen verwendet werden. Zum Beispiel, wenn jQuery verwendet werden soll, dann müssen Sie die Bibliothek herunterladen und über einen Apache- oder anderen Server bereitstellen. Und dann verwenden Sie sie im Template, wie bei der Entwicklung einer auf Ajax basierenden Anwendung.

Eine andere Methode, Ajax in Django zu verwenden, ist die Verwendung des Django-Ajax-Frameworks. Am häufigsten verwendet ist django-dajax, ein leistungsstarkes Werkzeug, das die asynchrone Darstellung von Logik und die schnelle Entwicklung von Webanwendungen ermöglicht, ohne fast JavaScript-Quellcode zu benötigen. Es unterstützt die vier beliebtesten js-Frameworks: Prototype, jQuery, Dojo und MooTools

Django verwenden-dajax

Der erste Schritt ist die Installation von django-dajax. Dies kann durch die Verwendung von easy_install oder pid erreicht werden

# 文件名：example.py
# 版权：　2020 由 w3codebox
# 作者：de.oldtoolbag.com
# 日期：　2020-08-08
$ pip install django_dajax
　$ easy_install django_dajax

Dies wird automatisch django installieren-dajaxice, basierend auf django-dajaxice wird benötigt. Dann müssen wir Ajax und dajaxice konfigurieren.

Fügen Sie dajax und dajaxice zu den Auswahlprojekten von INSTALLED_APPS in settings.py hinzu −

# 文件名：example.py
# 版权：　2020 由 w3codebox
# 作者：de.oldtoolbag.com
# 日期：　2020-08-08
INSTALLED_APPS　+= (
　　　　'dajaxice',
　　　　'dajax'
　)

Stellen Sie sicher, dass in derselben Datei settings.py die folgenden Einstellungen vorliegen: −

# 文件名：example.py
# 版权：　2020 由 w3codebox
# 作者：de.oldtoolbag.com
# 日期：　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'

Öffnen Sie nun myapp/Stellen Sie sicher, dass die folgenden Einstellungen im Datei url.py vorhanden sind: dajax URL und das Laden der statischen JS-Dateien von dajax −

# 文件名：example.py
# 版权：　2020 由 w3codebox
# 作者：de.oldtoolbag.com
# 日期：　2020-08-08
von dajaxice.core import dajaxice_autodiscover, dajaxice_config
　from django.contrib.staticfiles.urls import staticfiles_urlpatterns
　from django.conf import settings
　Dann die dajax-URLs:
　urlpatterns　+= patterns('',
　　　　url(r'^%s/'% settings.DAJAXICE_MEDIA_PREFIX, include('dajaxice.urls')),)
　
　urlpatterns　+= staticfiles_urlpatterns()

Wir erstellen eine einfache Tabelle, die auf dem Modell Dreamreal basiert und sie mit Ajax (ohne Neuladen) speichern.

Zunächst müssen wir im myapp/Dreamreal-Formular in form.py.

# 文件名：example.py
# 版权：　2020 由 w3codebox
# 作者：de.oldtoolbag.com
# 日期：　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)

Dann müssen wir im Dateiajax.py der Anwendung: myapp/ajax.py. Hier ist die relevante Logik, wir speichern das Formular und geben das Ausgabefenster zurück -

# 文件名：example.py
# 版权：　2020 由 w3codebox
# 作者：de.oldtoolbag.com
# 日期：　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 Eintrag %s wurde erfolgreich gespeichert." %　
　　　　　　　　　　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()

Lassen Sie uns nun das Template dreamreal.html erstellen, das das erforderliche Formular enthält -

# 文件名：example.py
# 版权：　2020 由 w3codebox
# 作者：de.oldtoolbag.com
# 日期：　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>

Zusätzlich, im Template-View: myapp/views.py −

# 文件名：example.py
# 版权：　2020 由 w3codebox
# 作者：de.oldtoolbag.com
# 日期：　2020-08-08
def dreamreal(request):
　　　　form = DreamrealForm()
　　　　return render(request, 'dreamreal.html', locals())

Fügen Sie die entsprechenden URLs hinzu: myapp/urls.py −

# 文件名：example.py
# 版权：　2020 由 w3codebox
# 作者：de.oldtoolbag.com
# 日期：　2020-08-08
url(r'^dreamreal',/', 'dreamreal', name = 'dreamreal'),

Fügen Sie jetzt den erforderlichen Code im Template hinzu, damit Ajax funktioniert −

Fügen Sie am Anfang der Datei hinzu -

# 文件名：example.py
# 版权：　2020 由 w3codebox
# 作者：de.oldtoolbag.com
# 日期：　2020-08-08
{% load static %}
　{% load dajaxice_templatetags %}

Fügen Sie im <head>-Teil des Templates dreamreal.html hinzu　-

Wir verwenden die jQuery-Bibliothek für dieses Beispiel, daher fügen wir den folgenden Code hinzu −

# 文件名：example.py
# 版权：　2020 由 w3codebox
# 作者：de.oldtoolbag.com
# 日期：　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 函数 -

# 文件名：example.py
# 版权：　2020 由 w3codebox
# 作者：de.oldtoolbag.com
# 日期：　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 静态文件的静态目录服务，运行　-

# 文件名：example.py
# 版权：　2020 由 w3codebox
# 作者：de.oldtoolbag.com
# 日期：　2020-08-08
$python manage.py collectstatic

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

访问将显示以下画面，　/myapp/dreamreal/ -

提交后，将显示以下画面 -