admin / 19.05.2018
Содержание
Перейти к: навигация, поиск
<< События
.load()
Устанавливает обработчик полной загрузки выбранных элементов. Метод имеет два варианта использования:
.load(handler(eventObject)):jQuery1.0
— функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.
.load(eventData, handler(eventObject)):jQuery1.4.3
— см. выше.
— дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: .
Событие происходит, когда сам элемент и все его дочерние элементы полностью загружены. Это событие может происходить на элементах, которые обладают полями URL (объект window, картинки, скрипты, фреймы).
Замечание: в некоторых случаях, если картинка содержится в кеше браузера, событие может не произойти. Для такого случая можно воспользоваться специальным событием , которое определено в небольшом плагине.
Замечание 2: если вам не требуется готовность мультимедийных файлов, лучше воспользоваться методом , который устанавливает обработчик готовности структуры документа, что происходит раньше начала загрузки файлов мультимедиа.
Для страницы, содержащей картинку
следующий код позволит обработать ее загрузку:
А вот так можно обработать готовность всей страницы:
Библиотека jQuery, а точнее функция jQuery.ajax() входящая в ее состав дает разработчикам уникальную возможность создавать динамические веб-сайты. Функция предназначена для обмена данными с сервером, т.е. с ее помощью можно передать данные в файл, обработать их и вернуть обратно, поместив в заранее указанный блок при этом нет необходимости перезагружать веб-страницу.
$.ajax(options);
Здесь options – это объект, содержащий передаваемые функции параметры, которые представлены ниже.
url – строка, URL-адрес запрашиваемого сценария.
type – метод запроса, POST или GET, по умолчанию используется GET;
cache – логическое значение указывает браузеру кэшировать (true) или не кэшировать (false) полученные данные.
data – объект, свойства которого служат параметрами запроса. При выполнении запроса GET параметры передаются в виде строки запроса, если запрос типа POST то параметры передаются в теле запроса.
data: {data1: "value1", data2: "value2", dataN: "valueN"}
dataType – ключевое слово идентифицирует данные пришедшие с сервера. Ключевое слово указывает, каким образом будет обработан полученный ответ, прежде чем он будет передан функции обратного вызова. Допустимые значения:
dataType:"json"
Ресурс на стороне сервера должен содержать соответствующий заголовок content-type.
header("Content-Type: text/html; charset=utf-8");
Если параметр dataType опущен, то ответ не будет предварительно обработан.
contentType – строка указывающая тип запроса, по умолчанию application/x-www-form-urlencoded; charset=UTF-8
processData логическое значение: true – кодирует(по умолчанию), false — не кодирует передаваемые данные в URL формат
success – функция обратного вызова, исполняется если код статуса в ответе сервера сообщает об успехе.
Первый параметр — ответ передаваемый сервером после обработки в соответствии с параметром dataType, второй параметр – код статуса.
Существует аналог параметра success, метод .done():
$.ajax({ //Параметры запроса }).done(function(data){ //Код выполняющийся после успешного запроса });
complete – функция обратного вызова, исполняется после успешного запроса, после выполнения success и error. Функция получает два аргумента XHR и строку сообщения о состоянии запроса ("success", "notmodified", "error", "timeout", "abort", or "parsererror").
beforeSend – функция вызываемая перед инициацией запроса.
error – функция обратного вызова выполняющаяся в случае ошибки. Функции передается три параметра: экземпляр XHR, строка сообщения о состояния и необязательный объект исключение, возвращаемый экземпляром XHR
error:function(XHR){ alert(" Ошибка: "+XHR.status+ " " + XHR.statusText); }
statusCode – статус, который вернет сервер после запроса
statusCode: { 404: function() { alert("Страница не найдена"); } }
global – параметр содержит логическое значение: true – разрешает (по умолчанию), false – запрещает глобальные функции, которые могут вызываться на различных этапах выполнение запроса.
Перечень глобальных функций
$("displayStatus").ajaxSuccess(function(info){ $(info.target).append("Запрос выполнен успешно") });
acync – логическое значение: true – запрос выполняется как асинхронный (по умолчанию), false – запрос выполняется как синхронный;
timeout – Числовой параметр, определяет время ожидания ответа от сервера в миллисекундах, если в течении указанного времени ответа не последовало, то дальнейшее выполнение передается функции обработки ошибок error
timeout:1000
Содержимое файла:
Серверный файл
Файл "uploadContent.php" находится на серверной стороне, функция $.ajax() через GET запрос посылает текст введенный пользователем, сценарий, находящийся в файле обрабатывает полученные данные, и результат возвращает обратно функции.
<?php header("Content-Type: text/html; charset=UTF-8"); if($_SERVER["HTTP_X_REQUESTED_WITH"] == "XMLHttpRequest") { print " DATA: ".$_GET["data"]; } ?>
Файл содержит функцию header, которая оправляет HTML шапку, а также суперглобальный массив $_SERVER["HTTP_X_REQUESTED_WITH"], который проверяет тип пришедшего запроса, если он соответствует Ajax запросу, т.е. XMLHttpRequest, то происходит дальнейшее выполнение сценария.
Функция для перекодировки текста из UTF8 в WIN1251. Скачать функцию.
В примерах использована библиотека JQuery версии v1.7.2, вы всегда можете скачать более новую зайдя на официальный сайт в раздел загрузок.
Хотя jQuery очень удобный фреймворк, не стоит смотреть на него как на единственную панацею для решения всех проблем. Кое-что лучше делать на чистом JavaScript, а данная задача вообще не входит в спектр jQuery.
Для перенаправления нужно использовать window.location.replace(»…»), это лучший способ симулировать HTTP-редирект.
Объясняю, почему именно это, а не «window.location.href = …». Дело в том, что window.location.replace(»…») не будет помещать исходную страницу в историю сессии, следовательно пользователь получит новую страницу, а кнопка «Назад» будет неактивна (не будет содержать длинного списка просмотренных ранее страниц). Тем не менее, если Вы хотите, чтобы перенаправление происходило так, как будто пользователь сам нажал на ссылку, тогда используйте location.href.
// Поведение браузера будет подобно HTTP-редиректу: window.location.replace(""); // Поведение браузера будет подобно клику по ссылке: window.location.href = "";
Чем меньше информации приходится передавать сайту на каждый запрос, тем лучше. Поскольку получаем меньшую нагрузку на сервер и на канал связи. Первым таким улучшением на сайте я сделал подгрузку списка статей при навигации по пагинатору страниц.
Смысл в том, что когда пользователь хочет перейти на следующую страницу со списком статей и кликает на ссылку в пагинаторе , то производится перехват события клика, событие отменяется, но высылается AJAX запрос на сервер с номером запрашиваемой страницы. Когда сервер получает такой запрос, он производит рендеринг только списка статей и высылает его обратно.
Для главной страницы сайта я создал JavaScript файл index.js, в котором будет логика AJAX запроса, а также привязка обработчика клика по ссылкам в пагинаторе.
Важным моментом является то, что я использую для пагинатора django-bootstrap3 . Соответственно, чтобы подключить обработчик клика, я использую селектор ‘.paginator > li > a’ .
Содержимое файла будет следующим
class Index { static initPaginator() { document.body.querySelectorAll(‘.pagination > li > a’) .forEach( link => link.addEventListener(‘click’, Index.pagination_link_clickHandler) ); } static pagination_link_clickHandler(event){ event.preventDefault(); // запрещаем событие let path = event.target.href; // забираем путь let page = Global.getURLParameter(path, ‘page’); if (typeof page !== ‘undefined’) { jQuery.ajax({ url: jQuery(this).attr(‘action’), type: ‘POST’, data: {‘page’: getURLParameter(path, ‘page’)}, // забираем номер страницы, которую нужно отобразить success : function (json) { // Если запрос прошёл успешно и сайт вернул результат if (json.result) { window.history.pushState({route: path}, «EVILEG», path); // устанавливаем URL в строку браузера jQuery(«#articles-list»).replaceWith(articles); // Заменяем div со списком статей на новый Index.initPaginator(); // Переинициализируем пагинатор jQuery(window).scrollTop(0); // Скроллим страницу в начало } } }); } } } Index.initPaginator();
Я стараюсь использовать стандарт ecmascript 6. Поэтому для страницы index используется класс Index для обобщения применяемых методов.
Для получения номера страницы в URL используем функцию getURLParameter .
Таким образом у нас должна быть специальная структура шаблонов, а именно, должен быть шаблон для рендеринга списка статей, в моём случае шаблон с превью одной статьи, а также шаблон главной страницы сайта.
То есть будет:
index.html наследован от базового шаблона base.html в котором имеется блок для подключения javascript файлов.
{% extends ‘base.html’ %} {% block page %} {% include ‘article_previews_list.html’ %} {% endblock %} {% block javascript_footer %} <script src=»https://steptosleep.ru/wp-content/uploads/2018/06/86029.jpg»></script> {% endblock %}
Список статей представляет собой div , который будет заменяться при каждом запросе.
<div id=»articles-list»> {% load bootstrap_pagination from bootstrap3 %} {% for article in object_list %} {% include ‘knowledge/article_preview.html’ %} {% endfor %} {% bootstrap_pagination object_list pages_to_show=»10″ %} </div>
Маршрут для главной страницы будет выглядеть следующим образом
urlpatterns = [ url(r’^$’, views.IndexView.as_view(), name=’index’) ]
А теперь рассмотрим представление, которое будет возвращать список статей или сразу всю страницу
class IndexView(View): template_name = ‘index.html’ def get(self, request): return render(request=request, template_name=self.template_name, context={‘object_list’: get_paginated_page(request, Article.objects.all())}) def post(self, request): if request.is_ajax(): return JsonResponse({ «result»: True, «articles»: render_to_string( request=request, template_name=’article_previews_list.html’, context={‘object_list’: get_paginated_page(request, Article.objects.all())} ) }) else: raise Http404()
Важным моментом является то, что сайт должен корректно обрабатывать оба вида запросов, как обычный, так и AJAX запрос. Поскольку пользователь может зайти как напрямую на одну из страниц, так и с помощью пагинации на сайте.
Возможно, вас в данном коде заинтересует метод get_paginated_page, который с помощью класса Paginator генерирует нужную страницу для отображения.
# -*- coding: utf-8 -*- from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage def get_paginated_page(request, objects, number=10): current_page = Paginator(objects, number) page = request.GET.get(‘page’) if request.method == ‘GET’ else request.POST.get(‘page’) try: return current_page.page(page) except PageNotAnInteger: return current_page.page(1) except EmptyPage: return current_page.page(current_page.num_pages)
Для Django рекомендую VDS-сервера хостера Timeweb .
FILED UNDER : IT