Учебник Django

Приложения Ajax с Django

Ajax в основном является комбинацией технологий, интегрированных вместе, чтобы уменьшить количество нагрузки на страницу. Мы обычно используем Ajax для смягчения конечного用户体验. В Django Ajax можно использовать напрямую с помощью библиотек Ajax, таких как jQuery или другие. Например, если вы хотите использовать jQuery, вам нужно будет загрузить и обслуживать библиотеку на сервере через Apache или другой сервер. Затем вы можете использовать ее в шаблоне, как при разработке приложения на основе Ajax.

Другой способ использования Ajax в Django - это использование Ajax-фреймворка Django. Самым популярным является django-dajax, это мощный инструмент, который позволяет легко асинхронно отображать логику и быстро разрабатывать веб-приложения, используя Python и почти без необходимости использовать исходный код JavaScript. Он поддерживает четыре самых популярных js-фреймворка: Prototype, jQuery, Dojo и MooTools

Использование Django-dajax

Прежде всего, нужно установить django-dajax. Это можно сделать с помощью easy_install или pip

# Файл: example.py
# Авторские права: 2020 By w3codebox
# Автор: ru.oldtoolbag.com
# Дата: 2020-08-08
$ pip install django_dajax
　$ easy_install django_dajax

Это автоматически установит django-dajax в соответствии с требованиями django-dajax. Затем нам нужно настроить Ajax и dajaxice.

Добавить dajax и dajaxice в проект INSTALLED_APPS в settings.py

# Файл: example.py
# Авторские права: 2020 By w3codebox
# Автор: ru.oldtoolbag.com
# Дата: 2020-08-08
INSTALLED_APPS += (
　　　　'dajaxice'
　　　　'dajax'
　)

Убедитесь, что в одном и том же файле settings.py, у вас есть следующие −

# Файл: example.py
# Авторские права: 2020 By w3codebox
# Автор: ru.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 By w3codebox
# Автор: ru.oldtoolbag.com
# Дата: 2020-08-08
from　dajaxice.core　import　dajaxice_autodiscover,　dajaxice_config
　from　django.contrib.staticfiles.urls　import　staticfiles_urlpatterns
　from　django.conf　import　settings
　Тогда URLs dajax:
　urlpatterns += patterns('',
　　　　url(r'^%s/' % settings.DAJAXICE_MEDIA_PREFIX, include('dajaxice.urls')),)
　
　urlpatterns += staticfiles_urlpatterns()

Мы создаем таблицу на основе модели Dreamreal для хранения данных, используя Ajax (не перезагружая страницу).

Сначала нам нужно в файле myapp/form.py в форме Dreamreal.

# Файл: example.py
# Авторские права: 2020 By w3codebox
# Автор: ru.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. Здесь находится соответствующий логик, мы сохраняем форму и возвращаем результат в всплывающем окне -

Пример

# Файл: example.py
# Авторские права: 2020 By w3codebox
# Автор: ru.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 был успешно сохранен." %　
　　　　　　　　　　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 By w3codebox
# Автор: ru.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 By w3codebox
# Автор: ru.oldtoolbag.com
# Дата: 2020-08-08
def dreamreal(request):
　　　　form = DreamrealForm()
　　　　return render(request, 'dreamreal.html', locals())

Добавьте соответствующий URL: myapp/urls.py −

# Файл: example.py
# Авторские права: 2020 By w3codebox
# Автор: ru.oldtoolbag.com
# Дата: 2020-08-08
url(r'^dreamreal/', 'dreamreal', name = 'dreamreal'),

Теперь добавьте необходимые коды в шаблоне, чтобы Ajax работал −

Добавьте следующий код в начале файла −

# Файл: example.py
# Авторские права: 2020 By w3codebox
# Автор: ru.oldtoolbag.com
# Дата: 2020-08-08
{% load static %}
　{% load dajaxice_templatetags %}

Добавьте следующий код в разделе <head> шаблона dreamreal.html −

Мы используем библиотеку JQuery для данного примера, поэтому добавляем следующий код −

# Файл: example.py
# Авторские права: 2020 By w3codebox
# Автор: ru.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 By w3codebox
# Автор: ru.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 By w3codebox
# Автор: ru.oldtoolbag.com
# Дата: 2020-08-08
$python manage.py collectstatic

Примечание - Иногда может отсутствовать jquery.dajax.core.js, если это так, просто скачайте исходный код и поместите его в папку статических файлов.

Посещение покажет следующее изображение, /myapp/dreamreal/ -

После отправки вы увидите следующее отображение -

Быстрый старт Django RSS Django