Використання методу load для завантаження контенту (js, Ajax)

Last update: 28 Лютого, 2023

Метод можно крепить к событию (наведение мыши, клик по кнопке). При этом контейнер в который будем загружать информацию должен уже загрузиться на странице (т.е. либо находиться ниже строки выполнения кода js, либо вызываться после загрузки всей страницы).

Самый простой пример:

$('#ConteinerID').load('https://sapid.info/');

В контейнер с id ConteinerID будет загружено содержимое страницы сайта sapid.info.

Вот еще вариант, в котором показано, как после загрузки страницы плавно подгрузить информацию с конкретного сайта:

<div id="ButtonID">Кнопка</div>
<div id="ConteinerID">Контейнер для вывода информации</div>

<script>
ButtonID.onclick = function()
{
$('#ConteinerID').fadeOut(200);
$('#ConteinerID').css("display", "none");
$('#ConteinerID').load('http://site.ru/InfoToConteiner.php');
$('#ConteinerID').fadeIn(300);
};
</script>

Примечательно, что метод позволяет запустить функцию по факту выполнения загрузки, что позволяет создать цикл – череду обращений, каждое из которых будет отправлено в момент обработки предыдущего. Мной лично используется для парсинга. Можно дописать код проверки, отдала ли страница то что нам нужно и не дублирует ли полученная информация информацию с других страниц.

Пример запуска функции по факту выполнения загрузки:

$('#result').load('https://sapid.info/', function() { alert('Содержимое главной страницы сайта sapid.info успешно загружено.'); });

Можно загружать не весь документ по ссылке, а только часть его, пример:

$('#result').load('https://sapid.info/ #FullPost');

Пример с проверкой, был ли успешно выполнен запрос

<!DOCTYPE html>
<html>
<head>
 <style>
 body{ font-size: 12px; font-family: Arial; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
<script>
$("#success").load("/not-here.php", function(response, status, xhr) {
 if (status == "error") {
   var msg = "Sorry but there was an error: ";
   $("#error").html(msg + xhr.status + " " + xhr.statusText);
 }
});
 </script>
</body>
</html>