Фильтрация товаров по checkbox с отправкой запроса в базу данных

Реализация динамического фильтра товаров с использованием флажков (checkbox) - одна из ключевых задач интернет-магазинов. Пользователь отмечает нужные диапазоны, например 20-25 и 35-45, и система подгружает подходящие записи из базы данных. В этой статье мы разберём, как организовать такой механизм на стороне клиента и сервера.

Архитектура фильтрации: от клика до базы данных

Для корректной работы необходимо настроить обмен данными между интерфейсом пользователя и серверной частью. Основные этапы:

• Отслеживание события change на каждом чекбоксе
• Сбор выбранных значений в массив
• Отправка асинхронного запроса (AJAX) на сервер
• Обработка запроса и выборка товаров из БД
• Возврат результата и обновление страницы

Клиентская часть: JavaScript для сбора значений

Предположим, у вас есть чекбоксы с атрибутом data-range, содержащим диапазон (например, '35-50'). При изменении состояния любого чекбокса собираем все выбранные значения и отправляем на сервер:

document.querySelectorAll('input[type="checkbox"]').forEach(cb => {
  cb.addEventListener('change', function() {
    const selected = [];
    document.querySelectorAll('input[type="checkbox"]:checked').forEach(c => {
      selected.push(c.getAttribute('data-range'));
    });
    fetch('/filter', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ranges: selected})
    })
    .then(response => response.json())
    .then(data => {
      // обновить список товаров на странице
    });
  });
});

Серверная часть: обработка запроса на PHP

На сервере получаем массив выбранных диапазонов. Чтобы выбрать товары, размер которых попадает в любой из указанных интервалов, используем SQL-запрос с динамическим построением условий:

$ranges = json_decode(file_get_contents('php://input'), true)['ranges'];
$conditions = [];
foreach ($ranges as $range) {
  list($min, $max) = explode('-', $range);
  $conditions[] = "(size BETWEEN $min AND $max)";
}
$sql = "SELECT * FROM products WHERE " . implode(' OR ', $conditions);
$result = mysqli_query($conn, $sql);
// вернуть данные в JSON

Особенности работы с диапазонами в БД

Если размеры хранятся в виде строк (например, '35-50'), потребуется предварительная обработка. Рекомендуется хранить минимальное и максимальное значение в отдельных столбцах (size_min и size_max). Это упростит запросы и улучшит производительность. Пример структуры таблицы:

• id - идентификатор товара
• name - название
• size_min - минимальный размер (INT)
• size_max - максимальный размер (INT)

Тогда запрос будет выглядеть так: SELECT * FROM products WHERE (size_min <= ? AND size_max >= ?) OR ...

Оптимизация для множественных выборов

При одновременном выборе нескольких диапазонов важно избежать дублирования товаров. Используйте DISTINCT или группировку. Для ускорения работы добавьте индексы на поля size_min и size_max.

Пример работы фильтра на практике

Пользователь отмечает чекбоксы «20-25» и «35-45». При нажатии отправляется AJAX-запрос с массивом ['20-25', '35-45']. Сервер формирует условие (size BETWEEN 20 AND 25) OR (size BETWEEN 35 AND 45) и возвращает все товары, попадающие хотя бы в один из интервалов. На странице динамически обновляется каталог.

Заключение

Реализация фильтрации по чекбоксам требует согласованной работы фронтенда и бэкенда. Используя простые AJAX-запросы и грамотные SQL-условия, вы сможете быстро отбирать товары по любым диапазонам. Для масштабируемости храните размеры в нормализованном виде и не забывайте про индексацию базы данных.