Ajax подгрузка контента на jQuery

Иногда стоит задача реализовать AJAX загрузку контента с сервера без перезагрузки страницы. Например, обновить комментарии или подгрузить полный текст статьи при клике на кнопку «Подробнее». Для этого в jQuery есть удобный метод jQuery load(). Он делает асинхронный запрос на сервер и вставляет полученные данные (HTML разметку) в указанный элемент.

$("#result").load("ajax.html");

Вторым аргументом можно передавать параметры запроса

$("#result").load("ajax.php",{param1: value1, param2: value2});

Давайте посмотрим как он работает.

Предположим у нас есть страница с новостями, на которой выводится анонс этих новостей. В конце анонса располагается ссылка «Подробнее» на полный текст новости. Выглядеть это может, например, так.

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

<a class="read-more" data-id="5" href="#">Подробнее</a>

где data-id="5" — это id страницы новости. У каждой новости он будет свой.

А сам контент полной новости выводится в блок div, который расположен в конце страницы.

<div id="content"></div>

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

Шаг 1. Контроллер для AJAX запросов

Создадим файл, на который будем отправлять AJAX запрос и который будет возвращать контент указанной страницы. Назовем его ajax.php и положим в папку assets.

<?php
// Если запрос не AJAX или не передано действие, выходим
if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest' || empty($_REQUEST['action'])) {exit();}

$action = $_REQUEST['action'];

define('MODX_API_MODE', true);
require_once dirname(dirname(__FILE__)).'/index.php';

$modx->getService('error','error.modError');
$modx->getRequest();
$modx->setLogLevel(modX::LOG_LEVEL_ERROR);
$modx->setLogTarget('FILE');
$modx->error->message = null;

$output = '';
switch ($action) {
    case 'getContent':
        // Если не передан id страницы, тоже выходим
        $id = isset($_REQUEST['id']) ? (int) $_REQUEST['id'] : 0;
        if (empty($id)) {
            exit();
        };

        $object = $modx->getObject('modResource',$id);
        $output = $object->get('content');
        // Парсим теги MODX
        $maxIterations= (integer) $modx->getOption('parser_max_iterations', null, 10);
        $modx->getParser()->processElementTags('', $output, false, false, '[[', ']]', array(), $maxIterations);
        $modx->getParser()->processElementTags('', $output, true, true, '[[', ']]', array(), $maxIterations);
}


@session_write_close();
exit($output);

Шаг 2. Скрипт обработки

Теперь нам нужно сделать так, чтобы по клику на ссылку «Подробнее» на наш коннектор пошёл AJAX запрос. Сделаем это с помощью jQuery. Создадим файл скрипта и подключим его на странице.

// jQuery должен быть уже подключен
$(document).on('click','.read-more',function(e){
	e.preventDefault();
	var id = $(this).data('id') || 0;
	// Вставляем полученный контент в HTML блок с id="content"
	$("#content").load("/assets/ajax.php",{action:"getContent", id:id});
});

Вот и всё. Если запрос прошел успешно, то в блок с id="content" вставится содержание, которое возвращается из коннектора.

Пример для модального окна

Давайте на практике попробуем использовать данный прием для вывода контента в модальное окно. Опять же воспользуемся фреймворком Bootstrap. В нём уже есть модальные окна.

Добавим в футер разметку модального окна

<div class="modal fadeIn" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">Модальное окно</h4>
        </div>
        <div id="content" class="modal-body"></div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default btn-close">Закрыть</button>
        </div>
    </div>
  </div>
</div>

Открывать модальное окно мы будем при условии, что контент новости не пустой, т.е. что-то вернётся. А проверять наличие контента мы будем с помощью третьего агрумента функции .load(url, data, complete). Javascript код будет выглядеть так

$(document).on('click','.read-more',function(e){
    e.preventDefault();
    var id = $(this).data('id') || 0;
    // Вставляем контент в тело модального окна
    $("#content").load("/assets/ajax.php",{action:"getContent",id:id}, function(response){
        // Если ответ не пустой, открываем модальное окно
        if (response) {
            $("#mymodal").modal('show');
        }
    });
});

Напоследок

Ну и в конце хочу отметить интересную возможность метода load(). В отличие от других методов он позволяет фильтровать полученный контент с помощью CSS селекторов. Т.е. если нам нужен не весь контент, а только блок с комментариями с id="comments", то указываем это в запросе.

$("#result").load("ajax.php #comments");