load()

67
посл. ред. 10.02.2017

Метод load() выполняет ajax-запрос к серверу и вставляет полученный HTML-ответ в выбранные элементы.

Данный метод является самым простым вариантом получения данных с сервера. Он немного похож на вызов $.get(url, data, success), но с тем отличием, что load() - это метод jQuery-объекта, а не глобальная функция. Кроме того, load() позволяет задать обработчик, который запустится для каждого элемента выборки после вставки полученного HTML-кода в выбранные элементы.

Если jQuery-объект не имеет ни одного элемента (пустая выборка), ajax-запрос выполнен не будет.

Варианты использования

jQ_object.load(URL[, данные][, обработчик]) => jQuery
Выполняет ajax-запрос к серверу. Если статус запроса success или notmodified, вставляет полученный HTML-код в каждый элемент выборки.
URL :string
URL-адрес для запроса.
данные :string,object
Данные, отправляемые на сервер. Если данные передаются в виде объекта, тогда запрос выполняется методом POST. Если строкой - методом GET.
обработчик :function(полученные_данные, статус_запроса, jqXHR)
Функция, которая запустится для каждого элемента выборки после вставки в них HTML-ответа с сервера.

Получение фрагментов HTML-страниц

Метод load() в отличие от $.get() позволяет указать конкретную часть полученного HTML-документа для вставки на страницу. Это реализуется с помощью специального синтаксиса для URL-параметра. Если строка с URL-адресом содержит один или более пробелов, тогда всё, что следует после первого пробела, интерпретируется как jQuery-селектор. Этот селектор определяет, какую часть полученного HTML-документа необходимо вставить на страницу. Пример:

$('#container').load('blocks.html #block_1');

В этом случае jQuery загрузит весь документ blocks.html, после чего найдёт в нём элемент с идентификатором block_1. Только этот элемент будет вставлен в контейнер #container.

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

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

Когда метод load() вызывается с параметром URL без селектора, ответ с сервера передаётся в метод html() (для вставки в документ) перед удалением скриптов. При этом все вставляемые скрипты будут выполнены. Если метод load() вызывается с селектором в параметре URL, тогда скрипты удаляются прежде, чем обновится DOM-дерево страницы (во время парсинга документа), то есть скрипты не будут выполнены.

Примеры

Вставка файла test.html в элемент #result:

$('#result').load('test.html');

Вставка всех элементов списка list_1 файла test.html в элемент #result:

$('#result').load('test.html ol#list_1 li');