Как передать выбранные категории в фильтре через ajax при нажатии на кнопку "Показать еще"?

  • 28 августа 2023 г. 23:36
Ответы на вопрос 1
Для передачи выбранных категорий в фильтре через ajax при нажатии на кнопку "Показать еще", вам потребуется использовать JavaScript и отправлять данные на сервер используя XMLHttpRequest или fetch API.

Вот пример реализации этой логики:

1. Создайте функцию обработчик для кнопки "Показать еще", которая будет срабатывать при нажатии на кнопку:

```javascript
document.getElementById('showMoreButton').addEventListener('click', function() {
  // Получите выбранные категории
  var selectedCategories = getSelectedCategories();

  // Отправьте данные на сервер используя ajax
  sendAjaxRequest(selectedCategories);
});
```

2. Создайте функцию `getSelectedCategories()`, которая будет возвращать выбранные категории:

```javascript
function getSelectedCategories() {
  var selectedCategories = [];

  // Получите выбранные категории и добавьте их в массив
  var checkboxes = document.querySelectorAll('.category-checkbox');
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      selectedCategories.push(checkboxes[i].value);
    }
  }

  return selectedCategories;
}
```

3. Создайте функцию `sendAjaxRequest(selectedCategories)`, которая будет отправлять данные на сервер используя ajax:

```javascript
function sendAjaxRequest(selectedCategories) {
  var xhr = new XMLHttpRequest();
  var url = 'your-server-url';
  var params = 'selectedCategories=' + JSON.stringify(selectedCategories);

  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

  xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
      // Обработайте ответ от сервера
      var response = JSON.parse(xhr.responseText);
      // Выведите записи из выбранных категорий на странице
      displayRecords(response);
    }
  }

  xhr.send(params);
}
```

4. На стороне сервера, вы должны обработать запрос, получить выбранные категории и вернуть записи из этих категорий в качестве ответа.

Надеюсь, это поможет вам передать выбранные категории в ajax фильтр и загрузить только записи из этих категорий при нажатии на кнопку "Показать еще".
Похожие вопросы