Материал из JQuery

Перейти к: навигация, поиск

<< События

.load()

Устанавливает обработчик полной загрузки выбранных элементов. Метод имеет два варианта использования:

Событие происходит, когда сам элемент и все его дочерние элементы полностью загружены. Это событие может происходить на элементах, которые обладают полями URL (объект window, картинки, скрипты, фреймы).

Примеры использования

Для страницы, содержащей картинку

следующий код позволит обработать ее загрузку:

А вот так можно обработать готовность всей страницы:

Ссылки

Библиотека jQuery, а точнее функция jQuery.ajax() входящая в ее состав дает разработчикам уникальную возможность создавать динамические веб-сайты. Функция предназначена для обмена данными с сервером, т.е. с ее помощью можно передать данные в файл, обработать их и вернуть обратно, поместив в заранее указанный блок при этом нет необходимости перезагружать веб-страницу.

Параметры функции $.ajax()

$.ajax(options);

Здесь options – это объект, содержащий передаваемые функции параметры, которые представлены ниже.

url – строка, URL-адрес запрашиваемого сценария.

type – метод запроса, POST или GET, по умолчанию используется GET;

cache – логическое значение указывает браузеру кэшировать (true) или не кэшировать (false) полученные данные.

data – объект, свойства которого служат параметрами запроса. При выполнении запроса GET параметры передаются в виде строки запроса, если запрос типа POST то параметры передаются в теле запроса.

data: {data1: "value1", data2: "value2", dataN: "valueN"}

dataType – ключевое слово идентифицирует данные пришедшие с сервера. Ключевое слово указывает, каким образом будет обработан полученный ответ, прежде чем он будет передан функции обратного вызова. Допустимые значения:

• xml – ответ анализируется и обрабатывается как XML, в функцию обратного вызова передается дерево DOM;
• html – ответ передается функции обратного вызова без обработки, все сценарии находящиеся в блоках <script> выполняются;
• json – ответ обрабатывает как формат json, в функцию обратного вызова передаетcя объект формата json;
• script – ответ обрабатывается как сценарий JavaScript, и после передается функцию обратного вызова;
• text – ответ воспринимается как обычный текст;

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 – функция обратного вызова, исполняется если код статуса в ответе сервера сообщает об успехе.

Пример 1. Динамическое обновление контента по таймеру

Первый параметр — ответ передаваемый сервером после обработки в соответствии с параметром 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 – запрещает глобальные функции, которые могут вызываться на различных этапах выполнение запроса.

Перечень глобальных функций

• $.ajaxStart() – функция срабатывает после запуска Ajax, но перед созданием экземпляра XHR.
• $.ajaxSend() – функция срабатывает после создания экземпляра XHR, но перед тем как запрос будет отправлен на сервер.
• $.ajaxSuccess() – функция сработает после того как с сервера вернется ответ, с кодом об успешном запросе.
• $.ajaxError() – Функция сработает, если ответ от сервера содержит код ошибки.
• $.ajaxComplete() – функция сработает после того как будет получен ответ сервера, и после вызова функций обратного вызова
• $.ajaxSuccess(),$.ajaxError().
• $ajaxStop() – функция сработает после всех этапов обработки, и вызова всех функций обратного вызова.

$("displayStatus").ajaxSuccess(function(info){  $(info.target).append("Запрос выполнен успешно") });

acync – логическое значение: true – запрос выполняется как асинхронный (по умолчанию), false – запрос выполняется как синхронный;

timeout – Числовой параметр, определяет время ожидания ответа от сервера в миллисекундах, если в течении указанного времени ответа не последовало, то дальнейшее выполнение передается функции обработки ошибок error

timeout:1000

Пример

Содержимое файла:

• Внутри парного тега <HEAD> подключена библиотеку JQuery, и тут же располагается функция .ajax();
• В теле документа располагаются: текстовое поле, данные из которого будут передаваться функцией .ajax() на обработку, кнопка BUTTON, при нажатии на которую будет вызываться функция .ajax(), и блок DIV, в который будут помещаться данные полученные из файла uploadContent.php;

Серверный файл 

Файл "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 запрос на сервер с номером запрашиваемой страницы. Когда сервер получает такой запрос, он производит рендеринг только списка статей и высылает его обратно.

Замена URL в браузере без перезагрузки страницы

Для главной страницы сайта я создал JavaScript файл index.js, в котором будет логика AJAX запроса, а также привязка обработчика клика по ссылкам в пагинаторе.

Загрузить jquery после полной загрузки страницы

Важным моментом является то, что я использую для пагинатора 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 .

Структура шаблонов

Таким образом у нас должна быть специальная структура шаблонов, а именно, должен быть шаблон для рендеринга списка статей, в моём случае шаблон с превью одной статьи, а также шаблон главной страницы сайта.

То есть будет:

• article_preview.html — этот шаблон рассматривать не будем, поскольку он не интересен для нас в данном случае
• article_previews_list.html
• index.html

index.html

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 %}

article_previews_list.html

Список статей представляет собой 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>

urls.py

Маршрут для главной страницы будет выглядеть следующим образом

urlpatterns = [ url(r’^$’, views.IndexView.as_view(), name=’index’) ]

views.py

А теперь рассмотрим представление, которое будет возвращать список статей или сразу всю страницу

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 .