.load()


.load( url [, data ] [, complete ] )Возвращает: jQuery

Описание: Загрузка данных с сервере и размещение полученного HTML в указанный элемент.

  • Добавлен в версии: 1.0.load( url [, data ] [, complete ] )

    • url
      Тип: String
      Строка содержащая URL-адрес куда будет отправлен запрос.
    • data
      Тип: PlainObject or String
      Плоский объект или строка, которая будет отправлена на сервер с запросом.
    • complete
      Тип: Function( String responseText, String textStatus, jqXHR jqXHR )
      Функция, которая будет вызвана когда запрос будет выполнен.

Примечание: обработчик события окончания загрузки также называется .load(). jQuery определяет какой именно метод вызван, на основании того какие аргументы передаются в метод.

Этот метод самый простой способ получить данные с сервера. Он примерно эквивалентен коде $.get(url, data, success), за исключеничем того что этот метод а не глобальная функция и неявный обработчик обратного вызова. Когда возвращается успешный ответ (т.е. когда значение textStatus равно "success" или "notmodified"), .load() устанавливает HTML содержимое в указанный элемент из возвращенных данных. Это означает, что в большинстве случаев, использование этого метода будет выглядеть следующим образом:

1
$( "#result" ).load( "ajax/test.html" );

Если не будет найден элемент соотвествующий заданному селектору, то, в этом случае, Ajax запрос не будет отправлен.

Функция обратного вызова

Если функция "complete" задана, то она выполняется после обработки и вставки HTML. Эта функция будет вызвана для каждого элемента в коллекции jQuery и this внутри нее будет указывать на DOM элемент.

1
2
3
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});

В этих примерах выше, если текущий документ не содержит элемента с ID равным "result," то метод .load() не выполнится.

Метод запроса

Метод POST будет исползован если в метод .load() передан объект, иначе будет использован GET.

Загрузка фрагмента страницы

Метод .load(), в отличие от $.get(), позволяет указать часть удаленного документа для вставки. Это доступно при помощи специального синтаксиса в параметре url. Если один или несколько символов пробела включены в строку, то первое слово, после первого пробела, будет предполагать jQuery селектор, который определит какая часть будет вставлена.

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

1
$( "#result" ).load( "ajax/test.html #container" );

Когда этот методы выполняется, извлекается содержимое ajax/test.html, но затем jQuery разбирает полученный документ и ищет элемент с ID равным container. Этот элемент, со всем своим содержимым, будет вставлен в элемент с ID равным result и остальная часть загруженного документа будет проигнорирована.

jQuery используется свойство браузера .innerHTML, чтобы проанализировать полученный документ и вставить его в текущий документ. Во время этого процесс, браузре часто отфильтровывает такие элементы из документа как: <html>, <title> или <head>. В результате, элемент полученный при помощи метода .load() может быть не таким же, как если получить этот документ в браузере напрямую.

Выполнения скриптов

Когда вызван .load() при помощи URL без выражения селектора, содержание передается в .html() до удаления скриптов. Это выполняется блоки скриптов, до их удаления. Если .load() вызван с выражением селектора в URL, то скрипты скрипты будут удалены до обновления DOM и поэтому не будут выполнены. Пример для обоих случае приведен ниже:

Здесь, любой JavaScript загруженный в #a как часть документа будет успешно выполнен.

1
$( "#a" ).load( "article.html" );

В следующем случае, блоки скрипта перед вставкой в #b будут удалены и не будут выполнены:

1
$( "#b" ).load( "article.html #target" );

Дополнительные примечания:

  • Из-за ограничений безопасности браузера, большинство "Ajax" запросов подверждено политике того же происхождения, запросы не могут быть выполнены к другим доменам, поддоменам, порту или протоколу.

Примеры:

Загружает элементы списка из другой страницы в список на текущей странице.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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-1.10.2.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 запрос вернул ошибку.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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-1.10.2.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".

1
$( "#feeds" ).load( "feeds.html" );

Результат:

1
<div id="feeds"><b>45</b> feeds found.</div>

передает массив данных на сервер.

1
$( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } );

Тоже самое что и выше, но код отправляет дополнительные параметры на сервер и выполняет функцию обратного вызов, после окончания выполнения запроса.

1
2
3
$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
alert( "The last 25 entries in the feed have been loaded" );
});