.load( url [, data ] [, complete ] )Возвращает: jQuery
Описание: Загрузка данных с сервера и размещение возвращенного HTML в соответствующих элементах.
-
версия добавлена: 1.0.load( url [, data ] [, complete ] )
- urlТип: СтрокаСтрока, содержащая URL, к которому отправляется запрос.
- dataОбъект или строка, отправляемые на сервер вместе с запросом.
- completeФункция обратного вызова, которая выполняется при завершении запроса.
-
Примечание: До jQuery 3.0, набор обработки событий также имел метод с именем .load(). Более старые версии jQuery определяли, какой метод следует вызвать, в зависимости от набора аргументов, переданных ему.
Этот метод — самый простой способ получения данных с сервера. Он примерно эквивалентен $.get(url, data, success) за исключением того, что это метод, а не глобальная функция, и у него есть неявная функция обратного вызова. При обнаружении успешного ответа (т. е. когда textStatus равно "success" или "notmodified"), .load() устанавливает содержимое HTML соответствующих элементов на возвращенные данные. Это означает, что большинство случаев использования метода могут быть довольно простыми:
$( "#result" ).load( "ajax/test.html" );
Если ни один элемент не соответствует селектору — в данном случае, если документ не содержит элемента с id="result" — запрос Ajax не будет отправлен.
Функция обратного вызова
Если предоставлена функция обратного вызова "complete", она выполняется после обработки пост-обработки и вставки HTML. Функция обратного вызова вызывается один раз для каждого элемента в коллекции jQuery, и this устанавливается для каждого DOM-элемента по очереди.
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
}); В двух примерах выше, если в текущем документе нет элемента с идентификатором "result", метод .load() не выполняется.
Метод запроса
Метод POST используется, если данные передаются как объект; в противном случае предполагается GET.
Загрузка фрагментов страницы
Метод .load() в отличие от $.get(), позволяет указать часть удаленного документа, которую нужно вставить. Это достигается с помощью специального синтаксиса для параметра url. Если в строке содержится одна или несколько пробельных символов, часть строки после первого пробела считается jQuery-селектором, который определяет содержимое, которое необходимо загрузить.
Мы можем изменить пример выше, используя только часть документа, которая извлекается:
$( "#result" ).load( "ajax/test.html #container" );
При выполнении этого метода он извлекает содержимое ajax/test.html, но затем jQuery анализирует возвращенный документ, чтобы найти элемент с идентификатором container. Этот элемент вместе с его содержимым вставляется в элемент с идентификатором result, а остальная часть извлеченного документа отбрасывается.
jQuery использует свойство .innerHTML браузера для анализа извлеченного документа и вставки его в текущий документ. Во время этого процесса браузеры часто фильтруют элементы из документа, такие как <html>, <title> или <head> элементы. В результате элементы, извлеченные методом .load(), могут не быть точно такими же, как если бы документ был получен непосредственно браузером.
Выполнение скриптов
При вызове .load() с помощью URL без присоединенного селекторного выражения, содержимое передается в .html() до удаления скриптов. Это выполняет блоки скриптов до их удаления. Однако, если .load() вызывается с присоединенным селекторным выражением к URL, скрипты удаляются до обновления DOM и, следовательно, не выполняются. Пример обоих случаев показан ниже:
Здесь любой JavaScript, загруженный в #a в качестве части документа, успешно выполнится.
$( "#a" ).load( "article.html" );
Однако в следующем случае блоки скриптов в документе, загруженном в #b, удаляются и не выполняются:
$( "#b" ).load( "article.html #target" );
Дополнительные заметки:
- Из-за ограничений безопасности браузера, большинство запросов "Ajax" подчиняются политике одинакового происхождения; запрос не может успешно получить данные с другого домена, поддомена, порта или протокола.
Примеры:
Загрузка элементов списка другой страницы в упорядоченный список.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<b>Projects:</b>
<ol id="new-projects"></ol>
<script>
$( "#new-projects" ).load( "/resources/load.html #projects li" );
</script>
</body>
</html> Демо:
Отображение уведомления, если запрос Ajax столкнется с ошибкой.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.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> Демо:
Загрузка файла feeds.html в div с ID feeds.
$( "#feeds" ).load( "feeds.html" );
Результат:
<div id="feeds"><b>45</b> feeds found.</div>
передача массивов данных на сервер.
$( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } ); То же, что и выше, но отправит дополнительные параметры на сервер и вызов, который выполняется, когда сервер завершит ответ.
$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
alert( "The last 25 entries in the feed have been loaded" );
}); 
