Функция jQuery .load() - WebDesignStudio1.net

Описание функции jQuery .load() динамической загрузки данных на страницу по технологии AJAX.

.load( url, [data], [function] ) загружает данные c сервера в определенный элемент коллекции jQuery. Является наиболее простым методом библиотеки динамической загрузки данных. Обратите внимание, что в отличие от глобальной функции $.get(url, data, success) этот запрос является методом предварительно отобранной коллекции элементов с возможностью вызова функции обработки пришедших на клиент данных, например,

$(‘#ajax_result’).load(‘ajax/newdata.html’)

Если селектор ‘#ajax_result’ не вернет данные, то AJAX запрос не будет выполнен.

Входные параметры

url — строка адреса, которому посылается AJAX запрос, обязательный параметр. В более поздних версиях библиотеки в этом параметре разрешено использовать селекторы jQuery. Это позволяет загружать с сервера не весь документ, а лишь его часть, например,
$(‘#ajax_result’).load(‘ajax/newdata.html #container’);
data — данные, посылаемые на сервер вместе с запросом, параметр необязательный. Если данные не посылаются, то запрос выполняется методом GET, если данные присутствуют, то используеnся метод POST. Представляют собой строку или пары ключ:значение(«plain object» в терминах jQuery).
function — параметр необязательный. Представляет собой callback функцию, выполняемую на клиенте по завершению запроса. Если задана callback функция обработки по событию «complete», то данная функция выполняется после выполнения упомянутой функции и после вставки HTML фрагмента в документ.

Возвращаемое значение — запрошенные данные.

Примеры использования метода load().

Пример1 Пример AJAX загрузки данных из файла сервера и вставки их в элемент клиентского документа c идентификатором ajax.

$("#ajax").load("add.html");

Пример2 Пример передачи массива данных с Web страницы на сервер.

$("#tagID").load("process.php", { 'account[]': ["Ваня", "Пупкин"] } );

Пример3 Пример использования callback функции обработки результатов AJAX загрузки данных.


<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
<b>Состояние AJAX запроса:</b>
<div id="success"></div>
<div id="error"></div>

<script>
$("#success").load("/not-here.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "При загрущке данных произошла ошибка: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});
</script>
</body>
</html>