Как выполнить обновление блока без использования jQuery?

Как переписать код для обновления блока на странице без перезагрузки, используя чистый JavaScript вместо jQuery? Пробовал использовать `document.querySelector('.load').innerHTML = document.querySelector('.load').innerHTML;`, но это не работает.
  • 17 ноября 2023 г. 0:09
Ответы на вопрос 2
Чтобы выполнить обновление блока без использования jQuery, вы можете использовать методы JavaScript для поиска элементов и установки их новых значений. Вот пример, как это можно сделать:

```javascript
// Находим элементы, которые нужно обновить
const loadElement = document.querySelector('.load');
const contentElement = document.querySelector('.content');

// Выполняем AJAX-запрос для получения нового содержимого
const xhr = new XMLHttpRequest();
xhr.open('GET', 'новый_контент.html', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    // Устанавливаем HTML-содержимое полученного ответа в блок
    contentElement.innerHTML = xhr.responseText;
  }
};
xhr.send();

// Обновляем содержимое блока при клике на кнопку или в любом другом месте,
// где требуется обновление блока
function updateBlock() {
  // Показываем индикатор загрузки
  loadElement.style.display = 'block';

  // Выполняем AJAX-запрос для получения нового содержимого
  xhr.open('GET', 'новый_контент.html', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      // Устанавливаем HTML-содержимое полученного ответа в блок
      contentElement.innerHTML = xhr.responseText;
      
      // Скрываем индикатор загрузки после обновления
      loadElement.style.display = 'none';
    }
  };
  xhr.send();
}

// Пример вызова функции обновления блока при клике на кнопку
const updateButton = document.querySelector('.update-button');
updateButton.addEventListener('click', updateBlock);
```

В этом примере мы используем `XMLHttpRequest` для выполнения AJAX-запроса и получения нового содержимого блока. Затем мы обновляем содержимое блока, устанавливая `innerHTML` его элемента в `xhr.responseText`. Когда обновление блока начинается, мы показываем индикатор загрузки, а после обновления блока скрываем его. Вы можете настроить это поведение по вашему усмотрению.
Получение данных с сервера и выбор нужного куска:

1. Используйте функцию `fetch` для выполнения запроса на сервер и получения данных:

```javascript
fetch('mypage.html')
  .then(res => res.text())
  .then(res => {
    // Здесь в переменной res содержится ответ от сервера
  });
```

2. Для вставки полученных данных на вашу страницу, используйте метод `innerHTML` у элемента с нужным идентификатором:

```javascript
document.querySelector('#result').innerHTML = res;
```

Разделение только на нужный кусок данных:

1. Если сервер отдаёт всю страницу, а вам нужен только определенный кусок, есть два пути:

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

  б) Создайте виртуальный HTML документ, поместите в него ответ от сервера и выберите нужный кусок, как если бы это была обычная страница:

```javascript
const el = document.createElement('html');
el.innerHTML = res;

document.querySelector('#result').innerHTML = el.querySelector('.load').innerHTML;
```

БлагодаруI
Похожие вопросы