تطبيقات Ajax في Django

Ajax هي مجموعة من التقنيات التي تدمج لتقليل كمية تحميل الصفحة. نستخدم Ajax عادة لتخفيف تجربة المستخدم النهائي. يمكن استخدام Ajax في Django مباشرة باستخدام مكتبات Ajax مثل jQuery أو غيرها. على سبيل المثال، إذا كنت ترغب في استخدام jQuery، فإنك بحاجة إلى تنزيل وتقديم المكتبة على خادم عبر Apache أو خادم آخر. ثم استخدمها في النمذجة، مثل تطبيق Ajax

طريقة أخرى لاستخدام Ajax في Django هي استخدام إطار العمل Ajax الخاص بـ Django. الأكثر شيوعًا هو django-dajax، وهو أداة قوية تتيح تمثيل منطق متسلسل بسهولة وتطوير تطبيقات ويب بسرعة عالية باستخدام Python دون الحاجة إلى أي كود JavaScript مصدر تقريبًا. يدعم أربعة إطارات JavaScript الأكثر شعبية: Prototype, jQuery, Dojo وMooTools

استخدام Django-dajax

أول شيء يجب القيام به هو تثبيت django-dajax. يمكن القيام بذلك باستخدام easy_install أو pip -

# اسم الملف : example.py
# حقوق الطبع والنشر : 2020 بواسطة w3codebox
# الكاتب : ar.oldtoolbag.com
# تاريخ - : 2020-08-08
$ pip install django_dajax
　$ easy_install django_dajax

سيتم تثبيت django-dajax تلقائيًا وفقًا لمتطلبات django-dajax. ثم، نحتاج إلى تكوين Ajax و dajaxice.

إضافة dajax و dajaxice في بيانات إعدادات settings.py مشروع اختيار INSTALLED_APPS -

# اسم الملف : example.py
# حقوق الطبع والنشر : 2020 بواسطة w3codebox
# الكاتب : ar.oldtoolbag.com
# تاريخ - : 2020-08-08
INSTALLED_APPS += (
　　　　'dajaxice',
　　　　'dajax'
　)

تأكد في نفس ملف settings.py، يجب أن يكون لديك ما يلي −

# اسم الملف : example.py
# حقوق الطبع والنشر : 2020 بواسطة w3codebox
# الكاتب : ar.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'

الآن افتح ملف myapp/url.py، تأكد من وجود الإعدادات التالية dajax URL و تحميل ملفات الـ js الساكنة لـ dajax −

# اسم الملف : example.py
# حقوق الطبع والنشر : 2020 بواسطة w3codebox
# الكاتب : ar.oldtoolbag.com
# تاريخ - : 2020-08-08
من dajaxice.core استيراد dajaxice_autodiscover, dajaxice_config
　من django.contrib.staticfiles.urls استيراد مسارات_الملفات_الساكنة
　من django.conf استيراد تنظيمات
　ثم urls dajax:
　urlpatterns += patterns('',
　　　　url(r'^%s/' % settings.DAJAXICE_MEDIA_PREFIX, include('dajaxice.urls')),)
　
　urlpatterns += staticfiles_urlpatterns()

نحن نقوم بإنشاء جدول بسيط بناءً على نموذج Dreamreal لتخزينه، باستخدام Ajax (الذى يعني بدون تحديث الصفحة).

أولاً، يجب علينا في ملف Dreamreal النموذج في myapp/form.py.

# اسم الملف : example.py
# حقوق الطبع والنشر : 2020 بواسطة w3codebox
# الكاتب : ar.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)

ثم، يجب علينا في ملف ajax.py للنموذج التطبيق: myapp/ajax.py. هنا الlogic المرتبطة، نحن نحفظ النموذج ثم نرجع إلى النتائج المنبثقة -

# اسم الملف : example.py
# حقوق الطبع والنشر : 2020 بواسطة w3codebox
# الكاتب : ar.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 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()

الآن، دعونا نخلق قالب dreamreal.html الذي يحتوي على النموذج المطلوب −

# اسم الملف : example.py
# حقوق الطبع والنشر : 2020 بواسطة w3codebox
# الكاتب : ar.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>

إضافة بعض التعديلات في رؤية القالب: myapp/views.py −

# اسم الملف : example.py
# حقوق الطبع والنشر : 2020 بواسطة w3codebox
# الكاتب : ar.oldtoolbag.com
# تاريخ - : 2020-08-08
def dreamreal(request):
　　　　form = DreamrealForm()
　　　　return render(request, 'dreamreal.html', locals())

أضف المسار المناسب: myapp/urls.py −

# اسم الملف : example.py
# حقوق الطبع والنشر : 2020 بواسطة w3codebox
# الكاتب : ar.oldtoolbag.com
# تاريخ - : 2020-08-08
url(r'^dreamreal/', 'dreamreal', name = 'dreamreal'),

أضف التكتبة الضرورية في القالب، لجعل Ajax يعمل −

أضف التكتبة في الجزء العلوي من الملف −

# اسم الملف : example.py
# حقوق الطبع والنشر : 2020 بواسطة w3codebox
# الكاتب : ar.oldtoolbag.com
# تاريخ - : 2020-08-08
{% load static %}
　{% load dajaxice_templatetags %}

أضف التكتبة في جزء <head> من قالب dreamreal.html −

نحن نستخدم مكتبة JQuery للنموذج الحالي، لذا قمنا بإضافة التكتبة التالية −

# اسم الملف : example.py
# حقوق الطبع والنشر : 2020 بواسطة w3codebox
# الكاتب : ar.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
# الكاتب : ar.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
# الكاتب : ar.oldtoolbag.com
# تاريخ - : 2020-08-08
$python manage.py collectstatic

ملاحظة - في بعض الأحيان يمكن أن يكون jquery.dajax.core.js مفقودًا، إذا حدث ذلك، فما عليك سوى تنزيل الشيفرة المصدرية ووضعها في مجلد الموارد الثابتة.

الزيارة ستشاهد ما يلي، /myapp/dreamreal/ -

بعد الإرسال، سيتم عرض ما يلي -