jQuery метод load()
пример
Изменение текста элемента div с помощью AJAX-запроса:
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
определение и использование
метод load() загружает данные с сервера через AJAX-запрос и вставляет возвращенные данные в указанный элемент.
Комментарий:существует также функция загрузить jQuery событиеметод. Какой вызывать, зависит от параметров.
грамматика
загрузить(url,data,функция(response,status,xhr))
| параметры | описание |
|---|---|
| url | Определяет URL, на который будет отправлен запрос. |
| data | Опционально. Данные, которые будут отправлены на сервер вместе с запросом. |
| function(response,status,xhr) |
Опционально. Функция, которая будет выполнена при завершении запроса. Дополнительные параметры:
|
Подробное описание
Этот метод является одним из самых простых способов получения данных с сервера. Он почти эквивалент $.get(url, data, success), но это не глобальная функция, и у нее есть скрытый обратный вызов. При получении успешного ответа (например, когда textStatus равно 'success' или 'notmodified'), .load() устанавливает HTML-контент соответствующего элемента в возвращенные данные. Это означает, что большинство использований этого метода будет очень простым:
$("#result").load("ajax/test.html");
Если предоставлен обратный вызов функции, то функция будет выполнена после выполнения post-processing:
$("#result").load("ajax/test.html", function() {
alert("Загрузка была выполнена.");
});
В上面的 двух примерах, если текущий документ не содержит ID 'result', метод .load() не будет выполнен.
Если предоставлены данные в виде объекта, используется метод POST; в противном случае используется метод GET.
Загрузка фрагмента страницы
Метод .load(), в отличие от $.get(), позволяет нам определить часть удаленного документа, которую нужно вставить. Это достигается с помощью особой синтаксис url параметра. Если в этой строке содержится один или несколько пробелов, то строка,紧 следующая за первым пробелом, является jQuery селектором, определяющим загружаемый контент.
Мы можем изменить上面的 пример, чтобы использовать часть полученного документа:
$("#result").load("ajax/test.html #container");
Если вызвать этот метод, будет получен контент файла ajax/test.html, но затем jQuery анализирует возвращенный документ, чтобы найти элементы с ID 'container'. Этот элемент, вместе с его содержимым, будет вставлен в элемент с ID 'result', а оставшаяся часть возвращенного документа будет отброшена.
jQuery использует атрибут .innerHTML браузера для анализа возвращаемого документа и вставки его в текущий документ. В этом процессе браузер часто фильтрует элементы из документа, такие как <html>, <title> или <head> элементы. В результате, элементы, возвращаемые .load(), могут не совпадать с документом, напрямую возвращаемым браузером.
Комментарий:Из-за ограничений безопасности браузера большинство запросов "Ajax" соблюдают политику единства источника; запросы не могут успешно получить данные из других доменов, поддоменов или протоколов.
Более примеров
Пример 1
Загрузка содержимого файла feeds.html:
$("#feeds").load("feeds.html");
Пример 2
Аналогично предыдущему примеру, но с отправкой дополнительных параметров в виде POST и отображением информации при успешном выполнении:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("Загружены последние 25 записей в ленте");
});
Пример 3
Загрузка части навигации боковой панели статьи в unordered list:
HTML код:
<b>jQuery Links:</b> <ul id="links"></ul>
jQuery код:
$("#links").load("/Main_Page #p-Getting-Started li");
Более примеров TIY
- Создание запроса AJAX и отправка данных через этот запрос
- Как использовать параметр data для отправки данных через запрос AJAX. (Этот пример объяснен в учебнике AJAX.)
- Создание запроса AJAX и использование обратной функции
- Как использовать параметр function для обработки данных результата запроса AJAX.
- Создание запроса AJAX с ошибкой
- Как использовать параметр function для обработки ошибок в запросах AJAX (используя параметр XMLHttpRequest).
