Ваша задача заключается в том, чтобы сформировать GET-запрос с фильтрами, используя один параметр (например, `filters`), и уверенно манипулировать этими параметрами, чтобы избежать сложности с кодированием вручную. Рассмотрим, как это можно реализовать.
Основная идея заключается в использовании JSON для хранения фильтров и последующего их кодирования в строку запроса. Вот пошаговая инструкция:
### 1. Сбор фильтров
Допустим, у вас есть несколько фильтров на странице, которые пользователи могут выбирать (чекбоксы, радиокнопки и т.д.). Вам нужно собрать информацию о выбранных фильтрах.
```javascript
function getSelectedFilters() {
const selectedGenres = Array.from(document.querySelectorAll('input[name="genre"]:checked')).map(input => input.value);
return {
genre: selectedGenres,
// Добавьте другие параметры фильтров здесь, если необходимо
};
}
```
### 2. Создание строки запроса
Когда пользователь применяет фильтры, вы можете создать URL с параметрами:
```javascript
function updateFilters() {
const filters = getSelectedFilters();
const filtersParam = JSON.stringify(filters); // Преобразуем объект в строку JSON
const encodedFilters = encodeURIComponent(filtersParam); // Кодируем строку
const newUrl = `${window.location.pathname}?filters=${encodedFilters}`;
window.history.pushState({ path: newUrl }, '', newUrl); // Изменяем URL без перезагрузки страницы
}
```
### 3. Восстановление фильтров
Для обработки URL-адреса и восстановления состояния фильтров при загрузке страницы используйте следующий код:
```javascript
function restoreFilters() {
const params = new URLSearchParams(window.location.search);
const filtersParam = params.get('filters');
if (!filtersParam) return;
try {
const filters = JSON.parse(decodeURIComponent(filtersParam)); // Декодируем и парсим JSON
// Восстанавливаем состояние фильтров на странице
filters.genre.forEach(genre => {
const checkbox = document.querySelector(`input[name="genre"][value="${genre}"]`);
if (checkbox) {
checkbox.checked = true; // Устанавливаем состояние чекбоксов
}
});
// Дополнительный код для восстановления других фильтров
} catch (error) {
console.error('Ошибка при восстановлении фильтров:', error);
}
}
// Вызов функции для восстановления фильтров при загрузке
document.addEventListener('DOMContentLoaded', restoreFilters);
```
### 4. Применение изменений
Теперь, всякий раз, когда пользователь выбирает или изменяет фильтры, вы можете вызывать функцию `updateFilters()`, чтобы обновить URL и применить выбранные фильтры без перезагрузки страницы.
### Дополнительная информация
- Убедитесь, что вы проверяете, как вы хотите управлять другими параметрами URL, чтобы избежать потерь. Если у вас есть другие параметры в URL, учтите их при создании нового URL.
- Возможности URL могут быть ограничены длиной, так что постарайтесь минимизировать объем данных, который вы отправляете через параметры.
Этот подход позволит вам удобно управлять фильтрами на странице, избегая сложностей с кодированием в строках запроса.