Как передать параметры в fancybox при выполнении AJAX запроса

Библиотека FancyBox позволяет создавать красивые всплывающие окна (модалки) с поддержкой AJAX-загрузки контента. Однако, если нужно передать дополнительные параметры (например, ID записи) и обработать их на сервере, могут возникнуть сложности.

В этой статье разберём:

• Как передавать данные из HTML в FancyBox через AJAX.

• Как обрабатывать параметры в PHP.

• Как улучшить безопасность и UX.

• Альтернативные способы передачи данных.

1. Подготовка HTML и передача параметров

Допустим, у нас есть ссылка, при клике на которую должен открываться FancyBox с контентом, зависящим от переданного ID.

1.1. HTML с data-атрибутами

<a href="ajax-handler.php" class="js-fancybox-ajax" data-id="123" data-type="portfolio">Открыть в FancyBox</a>

• href – URL обработчика AJAX.

• data-id – динамический ID (например, из базы данных).

• data-type – дополнительный параметр для фильтрации.

1.2. JavaScript: обработка клика и AJAX-запрос

$(document).on('click', '.js-fancybox-ajax', function(e) {
    e.preventDefault(); // Отменяем стандартное поведение ссылки
    
    const $link = $(this);
    const id = $link.data('id');
    const type = $link.data('type');
    const url = $link.attr('href');
    
    $.ajax({
        type: "POST",
        url: url,
        data: { 
            id: id,
            type: type,
            action: 'load_content' // Дополнительный параметр
        },
        dataType: 'html', // Ожидаем HTML-ответ
        beforeSend: function() {
            // Показываем индикатор загрузки
            $.fancybox.showLoading();
        }
    })
    .done(function(response) {
        // Открываем FancyBox с полученным контентом
        $.fancybox.open(response, {
            fitToView: false,
            width: 800,
            height: 600,
            afterShow: function() {
                console.log('FancyBox открыт!');
            }
        });
    })
    .fail(function() {
        // В случае ошибки показываем сообщение
        $.fancybox.open('<div class="error">Ошибка загрузки данных</div>');
    });
});

2. Обработка параметров в PHP

На сервере (ajax-handler.php) принимаем данные и возвращаем контент.

2.1. Безопасная обработка входных данных

<?php
header('Content-Type: text/html; charset=utf-8');

// Проверяем, что запрос AJAX
if (empty($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') {
    die('Доступ запрещен');
}

// Получаем и валидируем данные
$id = filter_input(INPUT_POST, 'id', FILTER_VALIDATE_INT);
$type = filter_input(INPUT_POST, 'type', FILTER_SANITIZE_STRING);
$action = filter_input(INPUT_POST, 'action', FILTER_SANITIZE_STRING);

if (!$id || !$action) {
    die('Неверные параметры');
}

// Загружаем данные (пример)
if ($action === 'load_content') {
    $content = loadContentFromDatabase($id, $type);
    echo $content;
} else {
    echo '<div class="error">Неизвестное действие</div>';
}

function loadContentFromDatabase($id, $type) {
    // Здесь логика загрузки данных (например, из БД)
    return "<div class='fancybox-content'><h2>Запись #$id</h2><p>Тип: $type</p></div>";
}
?>

2.2. Защита от CSRF (если нужно)

session_start();

if ($_POST['csrf_token'] !== $_SESSION['csrf_token']) {
    die('Ошибка безопасности');
}

В JS добавляем токен в data:

data: {
    id: id,
    type: type,
    csrf_token: '<?= $_SESSION["csrf_token"] ?>'
}

3. Альтернативные способы передачи параметров

3.1. Через URL (GET-параметры)

$.fancybox.open({
    src: `ajax-handler.php?id=${id}&type=${type}`,
    type: 'ajax'
});

На сервере данные будут в $_GET.

3.2. Использование ajax.settings в FancyBox

$.fancybox.open({
    src: 'ajax-handler.php',
    type: 'ajax',
    ajax: {
        settings: {
            type: 'POST',
            data: { id: id, type: type }
        }
    }
});

4. Рекомендации и улучшения

Безопасность:

• Всегда проверяйте $_POST/$_GET данные (filter_var, htmlspecialchars).

• Используйте CSRF-токены для важных операций.

UX:

• Добавляйте лоадер ($.fancybox.showLoading()).

• Обрабатывайте ошибки (таймауты, недоступность сервера).

Оптимизация:

• Кэшируйте AJAX-запросы, если контент статичен.

• Используйте JSON вместо HTML, если нужно динамическое обновление.

Заключение

Теперь вы знаете, как:

1. Передавать параметры в FancyBox через AJAX.

2. Обрабатывать их в PHP безопасно.

3. Улучшать UX с индикаторами загрузки.

4. Использовать альтернативные методы передачи данных.

Дополнительные материалы:

• Официальная документация FancyBox

• jQuery AJAX