jQuery load(url, data, callback)

Поиск функций jQuery

Характеристика функции

[Функция] load(url,[data],[complete(responseText,textStatus,XMLHttpRequest)])

Раздел "Ajax"

Функция позволяет загрузить HTML код из удалённого файла и вставить его в структуру DOM.

Параметры

load(url,[data],[complete(responseText,textStatus,XMLHttpRequest)])

1.0

url: URL адресс загружаемой HTML страницы .

data: объект, значения которого будут отправлены на сервер. Начиная с jQuery 1.3 взамен может быть передана строка данных.

callback: Фукнция вызываемая, когда ajax запрос выполнен (не обязательно успешно).

 function (responseText, textStatus, XMLHttpRequest) { 
 this; // ссылка на элемент
 responseText // текст ответа
 textStatus; // статус ответа
 XMLHttpRequest; // объект запроса 
 
 }

Описание

Запрос GET установлен по умолчанию, но если вы укажет дополнительные параметры, то запрос получится с методом POST. В jQuery 1.2 вы можете указать jQuery селектор в URL. Делайте это для того, чтобы фильтровать входящий HTML код, вставляющий только те элементы, которые соответствующие селектору. Синтаксис следующий "url #some > selector". См. примеры для большей информации.

Метод load предназначен для простой загрузки данных с сервера и встраивания структуры html в страницу.

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

Данный метод так же поддерживает функцию обратного вызова:

$('#result').load('ajax/test.html', function() {
  alert('Загрузка совершена.');
});

Если загружаемая страница не имеет элемента с ID равным "result", то загрузка не произойдёт.

Возможно, Вам будет интересно прочитать статьи о jQuery:

Примеры

Пример:

Загрузить часть кода в пользовательский не упорядоченный список.

Пример
Весь код

"jQuery"

$("#links").load("Main_Page #jq-p-Getting-Started li");

"HTML"

<b>jQuery Links:</b>
<ul id="links"></ul>

"CSS"

body{ font-size: 11px; font-family: Arial; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

$("#links").load("Main_Page #jq-p-Getting-Started li");

  });
</script>

</head>
<body class="iframe">


<b>jQuery Links:</b>
<ul id="links"></ul>


</body>
</html>


<style>

body{ font-size: 11px; font-family: Arial; }

</style>

Пример:

Загрузить feeds.html в элемент div с ID feeds.

"jQuery"

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

Пример:

Передать массив данных на сервер.

"jQuery"

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

Пример:

Как выше, но с POST запросом, в качестве дополнительного параметра, на сервер с последующим вызовом функции обратного вызова, которая выполняется после ответа сервера.

"jQuery"

 $("#feeds").load("feeds.php", {limit: 25}, function(){
   alert("Данные limit в элемент div с id feed загружены");
 });

Метод появился в jQuery 1.0

Официальная страница метода - http://api.jquery.com/load/

Форма для комментариев

Версия jQuery 1.4.2 Документ создан 2010-08-21

Руководство jQuery 1.4.2

Плагины jQuery UI

Эффекты

Возможно, Вам будет интересно прочитать статьи о jQuery: