.load()

Returns: jQuery

Загружает данные с сервера (html) и вставляет в указанный элемент.

  • version added: 1.0.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

    url

    Тип: Строка

    URL адрес запроса.


    data

    Тип: Объект или Строка

    Объект или строка данных, которые будут отправлены.


    complete(responseText, textStatus, XMLHttpRequest)

    Тип: Функция

    Функция обратного действия, которая запустится после завершения запроса.

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

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

Если селектора не существует — в нашем случае, если в документе нет блока с id="result" — Ajax запрос не будет выполнен.

Функция обратного действия

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

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

Если в документе нет элемента с ID "result," метод .load() не будет выполнен.

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

В случает использования объекта в качестве второго аргумента, то будет выполнен метод POST; в противном случае, GET.

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

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

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

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

При выполнении, метод извлекает содержимое файла ajax/test.html, но потом jQuery парсит результат и, благодаря селектору, находит тот фрагмент, который нужен. Только это содержание в результате будет вставлено на страницу, всё остальное будет опущено.

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

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

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

$('#a').load('article.html');

Однако, в следующем случае, скрипты загруженного документа, прикреплённого к элементу #b не будут выполнены:

Примеры

Пример: загружаем основную навигацию страницы в “подвал”, в виде элементов списка.

<!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.

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

Результат:

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

Пример: передача массив данных на сервер.

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

Пример: передача данных на сервер методом POST и использование метода обратного действия.

$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
^ Наверх ^