Описание:
Загружает HTML с сервера и встраивает его в объектную модель документа (DOM).
Аргументы
load( url, [ данные ], [ вызов ] )
Добавлена в версию: 1.0
url
Строка, содержащая URL, к которому направлен запрос.
Карта (ключ/значение) или строка, которые отправляется на сервер с запросом.
вызов (необязательно)
Функция, которая исполняется всякий раз после удачного завершения загрузки данных.
Этот способ является наиболее простым способом получения данных с сервера.
Он примерно эквивалентен
$.get(url, data, success)
за исключением того, что это метод, а не глобальная функция
и она имеет функцию обратного вызова.
При выполнении успешного запроса (то есть когда textStatus - "success" или "notmodified"), .load()
устанавливает HTML содержимое соответствующего элемента с помощью возвращенных данных.
Это означает, что в большинстве использование метода может быть довольно простым:
$('#result').load('ajax/test.html');
При наличии функции обратного вызова, она выполняется после выполнения загрузки файла:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
В двух примерах выше, если отсутствует элемент с ID "result", то метод
.load() не будет выполняться.Метод POST используется, если данные приводятся в качестве объекта; в противном случае используется GET.
Примечание: Обработка событий также имеет метод называемый
.load(). Какой из них запускается зависит от посылаемых аргументов.
Загрузка фрагментов страницы
Метод .load(), в отличие от
$.get(),
позволяет нам обозначить часть удаленного документа для ввода.
Это достигается с помощью специального синтаксиса для параметра url.
Если один или более пробелов включены в строку, часть строки следующей за первым пробелом показывает селектору jQuery, какое содержимое будет загружаться.
Мы могли бы изменить приведенный выше пример и извлечь лишь часть документа:
$('#result').load('ajax/test.html #container');
Когда выполняется этот метод, он извлекает содержимое
ajax/test.html,
но затем jQuery анализирует загруженный элемент, для того чтобы найти элемент с ID container.
Этот элемент, наряду с его содержанием, будет внесен в элемент с ID result, и остальная часть полученного документа отбрасывается.Примеры
Пример 1
Загружает меню навигации и встраивает его в пользовательский упорядоченный список.
$("#new-nav").load("/tryit/footer_navigation.html#jq-footerNavigation li");
Пример 1 - Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body{ font-size: 12px; font-family: Arial; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#new-nav").load("/tryit/footer_navigation.html#jq-footerNavigation li");
});
</script>
</head>
<body>
<b>Footer navigation:</b>
<ol id="new-nav"></ol>
</body>
</html>
Пример 2
Показывает сообщение, если запрос Ajax встречает ошибку.
$("#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);
}
});
Пример 2 - Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body{ font-size: 12px; font-family: Arial; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#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>
</head>
<body>
<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
</body>
</html>
Пример 3
Загружает файл feeds.html и встраивает его в элемент div с ID «feeds».
$("#feeds").load("feeds.html");
<div id="feeds"><b>45</b> feeds found.</div>
Пример 4
Отсылает массив данных на сервер.
$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );
Пример 5
То же самое, что и в предыдущем примере, но дополнительные параметры передаются на сервер методом POST, после получения ответа от сервера выводится сообщение.
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
Была ли эта информация полезной?
