Как сделать подгрузку контента ajax

Добавил пользователь Дмитрий К.
Обновлено: 05.10.2024

Чтобы реализовать данный функционал, нам понадобится кастомизированный шаблон компонента постраничной навигации и несколько строк js-кода.

Итак, для начала скачайте себе необходимый шаблон постранички, подкиньте его в компонент system.pagenavigation и не забудьте переключиться на этот шаблон в компоненте, который выводит контент. Чтобы было всё максимально понятно, я буду приводить пример над компонентом news.list

Теперь готовим наш news.list для работы с ajax-ом. Если у вас используется файл result_modifier.php , то лучше вставляйте этот код туда. Если же такого файла нет, то вставляйте код в самое начало файла template.php

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

Так же в самый конец файла component_epilog.php вставляйте следующий код (если такого файла нет, то вставляйте в самый низ файла template.php

Этот код прекратит выполнение, если идёт ajax-запрос.

То есть, при ajax-запросе мы получим только кусок контента, на который ссылается наша кнопка постраничной навигации (без шапки и футера).

Остаётся только закинуть вот такой js-скрипт в ваш файл скриптов.

При прокрутке (скроллинге) страницы, если мы достигли нашей кнопки постраничной навигации, выполняется ajax-запрос на URL кнопки. Полученный контент вставляется после кнопки, а затем кнопка удаляется.

Если же нужно подгружать контент при клике на кнопку, то используйте вот этот скрипт:

На этом всё. И обратите внимание, что скрипты используют библиотеку jQuery.

В этой статье познакомимся с сокращёнными AJAX методами jQuery: load, get, getJSON, getScript и post. Эти методы позволяют очень просто осуществлять необходимые AJAX запросы и в отличие от функции ajax, для их написания требуется меньшее количество строчек кода.

jQuery - метод load

Метод load предназначен для получения данных с сервера по указанному адресу URL и помещения их в один или несколько выбранных элементов.

Метод load имеет следующий синтаксис:

В большинстве случаев для отправки запроса метод load использует GET. Но он также может использовать и метод POST. Это происходит только тогда, когда данные для отправки на сервер указываются не в формате строки, а посредством объекта.

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

1. Вставить содержимое файла asidenav.tpl в блок c id="asidenav" после загрузки DOM страницы:

2. Загрузить часть файла demo.html в элемент при клике по кнопке, расположенной в нём:

Контент файла demo.html :

3. Загрузить в элемент, имеющий id="result" ответ content.php . Данный ответ будет зависеть от значения атрибута data-content , которое имеет кнопка, пославшая AJAX-запрос на сервер.

На сервере (файл content.php ):

jQuery - функция get

Синтаксис функции get :

По умолчанию функция get пытается автоматически определить формат полученных с сервера данных (xml, json, script, text или html). Осуществляет она это на основании MIME-типа ответа.

Например, для того чтобы функция get определила, что формат данных, который она получила с сервера, соответствует JSON, на стороне сервере в скрипте php должен быть установлен соответствующий заголовок:

В jQuery обработать отложенные события AJAX можно также с помощью Promise методов done (при успешном ответе), fail (при ошибке), always (при успешном ответе или при ошибке).

Примеры использования функции get

1. Подгрузим в HTML элемент после загрузки страницы содержимое файла content.tpl :

2. AJAX получение каждые 5 секунд нового изображения (URL) из определённой директории на сервере и отображения её на странице (вместо предыдущей картинки).

Содержимое фала random-image.php :

3. Пример, в котором реализуем AJAX подгрузку контента.

Данные для загрузки представим на сервере в виде массива $contents . Количество загружаемых данных и позицию смещения будем определять соответственно с помощью значений переменных count и offset . Обработку полученных с сервера данных будем осуществлять посредством Promise метода done .

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

jQuery - функция getJSON

Функция getJSON - идентична get , у которой в качестве значения параметра dataType установлено значение "json".

Синтаксис функции getJSON :

Пример c использованием функции getJSON

Пример, в котором после загрузки страницы выведем список страниц. Получать данные с сервера будем с помощью AJAX в формате JSON.

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

jQuery - функция getScript

Синтаксис функции getScript :

Пример c использованием функции getScript

После загрузки страницы получим с помощью AJAX запроса скрипт и выполним его:

Содержимое скрипта script.js :

jQuery - функция post

Синтаксис функции post :

Применение post ничем не отличается от использования jQuery-функции get . Единственное отличие между ними - это метод, с помощью которого они отправляют данные на сервер. Функция post отправляет данные в составе тела запроса (метод POST), а get - в составе URL (метод GET).

Примеры c использованием функции post

Содержимое файла guess-color.php :

2. Пример, в котором реализуем систему приветствия пользователя. Пока пользователь не введёт своё имя, будем приветствовать его как гостя. Определять имеет ли текущий пользователь имя, а также его отправку на сервер будем через AJAX (jQuery функцию post ). На стороне сервера сохранять имя пользователя будем посредством ссесий.

В данной статье рассказано, как подгружать часть контента на сайте WordPress при помощи технологий Ajax. Подобная штука позволяет прятать от поисковых машин выбранный контент (блоки).
И в то же время данные блоки будут доступны пользователю как и раньше, т.е. юзабельность сайта не теряется, при условии, что эти пользователи не выключали JavaScript в своем браузере.

Данную штуку уже довольно давно я использую на клиентских сайтах. А на ее использование меня подтолкнуло видео, которое будет в конце статьи (советую посмотреть всем).
[infob]

Прежде чем приступать к работе с файлами шаблона сайта - сделайте резервную копию, чтобы в случае чего вернуть все назад. Для редактирования файлов советую воспользоваться бесплатной программой Notepad++, в которой можно откатить все изменения назад, если еще не закрыли файл.[/infob]

ШАГ 1: создание подгружаемого файла

Прежде всего нам нужно создать файл, где у нас будет размещаться нужный контент. Под контентом понимается от самих слов, до целых блоков (например облако меток, целый сайдбар, или "Информация об авторе сайта без плагина"). Т.е. сами определитесь, что будете прятать.

Итак, нам нужно создать в корневой папке шаблона сайта файл с расширением .php (ajax-content.php например). Внутри него необходимо разместить следующее:

В первой строке Контент Ajax обозначает название шаблона (любое). Во второй строке функция wp_tag_cloud(); отобразит облако меток - вместо данной функции подставляете свой контент.

К слову: контентом может быть целый сайдбар, либо его часть. Так же можно поместить другие элементы сайта.

ШАГ 2: создание страницы

В сайдбаре выбираете свой шаблон, который создали на Шаге 1:

После этого нажимаем Опубликовать и подводим курсор на кнопку Изменить (первая картинка с названием страницы). Когда курсор стоит на данной кнопке, снизу слева в браузере появляется ссылка с большим количеством символов. В этой ссылке нужно найти цифры после page_id. Запишите их на бумажку, т.к. они понадобятся дальше.

В настоящее время на многих сайтах можно увидеть динамически подгружаемый контент при прокрутке страницы. Этот эффект стал одной из хороших альтернатив обычной постраничной навигации. Хотя и у него есть свои недостатки, но удобство этого способа их компенсирует. Из этой статьи вы узнаете, как реализовать такой функционал у себя в проекте используя jQuery плагин jScroll.

Подключаем jQuery библиотеку и скрипт:

Теперь нам необходимо добавить HTML разметку:

И наконец, применяем плагин к блоку с индикатором content:

У jScroll есть свои настройки:

Завершая рассматривать подключение плагина и его настройки, важно упомянуть, что передача данных на сервер осуществляется при помощи метода GET.

Пример работы с плагином

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

Помещаем весь скрипт в jQuery обёртку;
Определяем две переменных: впервой будет находиться результат выборки, во второй HTML код loading;
После загрузки страницы обращаемся к файлу jscroll.php с параметром type равным start и добавляем на страницу loading;
Если пришёл ответ, то добавляем его на страницу и удаляем loading;
Вызываем плагин.

Переходим к серверу, тут у нас будет чуть больше кода. Я не стал выносить функции в отдельный файл, чтобы всё было максимально компактно.

Вверху файла описываем настройки сервера: $start_count_posts (изначальное число подгружаемых записей), $loading_count_posts (число записей подгружаемых при прокрутке), $path (путь до обработчика) и $text (записи у нас будут отличаться только своими номерами, так как это пример).

Далее мы добавим вспомогательные функции: is_ajax(), is_get() и template_post().

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

Обработка данных начинается с проверки способа, которым отправляются они на сервер. Если всё удачно, то заходим внутрь и обрабатываем пришедшие данные, иначе вызываем функцию exit. Так как в данном примере мы выводим одну и ту же запись, я умышленно поставил задержки в каждом из случаев по одной секунде. Далее формируем HTML код для ответа и отправляем обратно к пользователю.

Вот и всё, теперь вы сможете легко добавить к себе на сайт jScroll плагин для подгрузки контента.

Большое спасибо за вашу помощь и внимательность к нам!

В этом материале мы рассмотрим тему ajax подгрузка данных при прокрутке страницы. Используя данное решение, можно избавиться от необходимости загружать из базы данных сразу весь контент, что значительно увеличит скорость загрузки всей страницы и уменьшит нагрузку на сервер баз данных. Конечно, как альтернативу этому, можно разбить контент на страницы и реализовать постраничную навигацию, но при этом каждый раз придется перезагружать страницу полностью, вместе со всеми js файлами и файлами стилей. Более того, пользователям придется выполнять больше действий, что хоть и немного, но все же снижает уровень юзабилити. И так, преступим непосредственно к реализации. Рассмотрим ее пошагово.

HTML страница должна содержать два блока:

блок со статической шириной и высотой, а так же со свойством overflow:auto для прокрутки контента;
внутри первого блока – блок-контейнер, с шириной, не превышающей родительский блок и с высотой, которая зависит от содержимого.

Внутрь второго блока и будет совершаться загрузка с сервера. Форма отображения зависит от ваших нужд и потребностей и никак не влияет на работу скрипта представленного в данном уроке.

Работа скрипта проходит поэтапно: обработка события scroll проверка достижения конца прокрутки; отправка ajax запроса к серверу; добавление полученных данных к странице.

Следующий JavaScript код иллюстрирует первые два этапа.

Два финальных этапа представлены в следующем фрагменте кода:

Весь контент из базы данных должен разбиваться на блоки с равным количеством записей. В этом нам поможет SQL оператор LIMIT, который предоставляет возможность получить конкретное количество записей, начиная с конкретной позиции. В PHP скрипте остается лишь выполнить запрос к базе данных и вывести результат. PHP скрипт представлен ниже.

Читайте также: