Метод jQuery.load() позволяет получить с сервера HTML-код и вставить в указанное место на странице.
Синтаксиси метода jQuery.load().
.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )
где
- url - строка, содержит URL запроса, для отправки данных.
- data - строка или Plain-объект (ассоциативный массив), данных для отправки на сервер.
- complete(data, textStatus, jqXHR) - функция обратного вызова, вызывается когда запрос выполнен.
Примечание: При обработке собыйти также есть метод .load(). jQuery определяет разницу в зависимости от набора аргументов.
Метод jQuery.load() является самым простым способом получения данных с сервера. Метод jQuery.load() эквивалентен методу jQuery.get(url, data, success) кроме того, что это метод, а не глобальная функция и имеет не явную функцию обратного вызова. после успешного ответа (т.е. когда textStatus равен "success" или "notmodified") метод jQuery.load() вставляет полученный HTML-код в указанные элементы. Это означает, что в большинстве случаев применение метода может быть довольно простым:
$('#result').load('ajax/test.html');
Если элементы указанные в селекторе не найдены на странице (в примере выше это элемент с id="result"), то запрос не будет отправлен.
Функция обратного вызова
Если обратный вызов "complete" определен, то он выполняется после пост-обработки и после вставки HTML-кода. Complete вызывается один раз для каждого элемента в коллекции jQuery и this устанавливается в соответсвии с очередным DOM-элементом.
$('#result').load('ajax/test.html', function() { alert('Load was performed.'); });
Получение части страницы
Метод jQuery.load() в отличие от jQuery.get(), позволяет указать какую часть получаемого HTML-документа следует вставить в текущую страницу. Это достигается с помощью специального синтаксиса для параметра URL. Если в строку вклюячены один или несклько пробелов, то значение после первого пробела рассматривается jQuery как селектор который указывает на содержание из получаемого HTML-документа.
Мы можем изменить приведенный выше пример, чтобы использовать только часть HTML-документа:
jQuery('#result').load('ajax/test.html #container');
При получении содержимого HTML-страницы ajax/test.html jQuery анализирует код, чтобы найти элемент с id="contaner". Этот элемент вместе с его содержимым вставляется в элемент с id="result" текщей страницы, а остальные данные игнорируются.
jQuery использует свойство браузеров innerHTML для разбора полученного документа и вставки его в текущий документ. Во время этого процесса, браузеры часто фильтруют некоторые элементы документа, такие как <html>, <title> и <head>. В результате, элементы извлекаемые jQuery.load() не могут быть точно такими же, как если бы указанная страница была получена непосредственно в браузере.
Выполенение скриптов.
При вызове метода jQuery.load() используя URL без суфикса выражение селктора, содержимое передается в метод jQuery.html() до удаления скриптов. Он выполняет блоки скриптов, до их отключения. Если метод jQuery.load() вызывается с селектором добавленным в URL, то скрипты вырезаются до обновления DOM и следовательно не выполняются. Примеры обоих случаев смотрите ниже:
В этом примере скрипты будут загружены в элемент с id="a" и как часть документа будет выполнен.
jQuery('#a').load('article.html');
Тем не менее в следующем примере блоки скриптов загружаемые в элемент с id="b" удаляются, и не выполняются.
jQuery('#b').load('article.html #target');
Дополнительное примечание.
- Из-за ограничений безопасности браузеров, большинство AJAX-запросов ограничены той же политикой безопасности. AJAX-запросы не могут успешно извлекать информацию из других доменов, поддоменов или протоколов.
Примеры
Пример: Загрузка подножия главной страницы в список.
<!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>Footer navigation:</b> <ol id="new-nav"></ol> <script> $("#new-nav").load("/ #jq-footerNavigation li"); </script> </body> </html>
Пример: Отобразить сообщение об ошибке, если при Ajax-запросе возникла ошибка.
<!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>
Пример: Загружаем файл feeds.html в div с id="feeds".
$("#feeds").load("feeds.html");
Пример: Передача данных в видже массива на сервер.
$("#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"); });