Спонсор поста: Частичное окрашивание волос в салоне красоты.

Оригинал: Load Data From Other Pages With jQuery

В этом руководстве мы возьмем данные из одной страницы и отобразим их на другой. Сейчас Вы можете скачать пример и посмотреть в действии.

В этом примере Вы должны сделать две странички. Первая будет называться “loadData.htm” и вторая - “theOtherPage.htm”.

Страница с данными
Для начала сделаем пример данных в нашей странице с названием “theOtherPage.htm”. Ради простоты я сделал список, который содержит мои любимые фильмы.

<ul id="favoriteMovies">
<li style="font-weight: bold; list-style-type: none;">My Favorite Movies</li>
<li>Contact</li>
<li>Shawshank Redemption</li>
<li>Napoleon Dynamite</li>
<li>Back To The Future</li>
<li>The Goonies</li>
<li>Cinderella Man</li>
<li>Apollo 13</li>
</ul>

Здесь нет ничего сложного. Главное - задать у списка id “favoriteMovies”.

Страница для получения данных
Следующим шагом сделаем страницу “loadData.htm”.

<div id="container">
 <a href="#" id="loadData">Click This Link To Load My Favorite Movies</a>
</div>

Это, в некотором роде, наша главная страница. Здесь у нас есть ссылка, которая содержит id “loadData”. Когда пользователь кликает по ссылке, запускается некоторый код, который заберет данные со страницы “theOtherPage.htm”.

jQuery

$(document).ready(function()
 {
  $("#loadData").click(function()
   {
    $(this).text("...One Moment Please...");
     $("#container").append('<div id="favoriteMovies"></div>')
                    .children("#favoriteMovies").hide()
                    .load("theOtherPage.htm ul#favoriteMovies", function()
                     {
                      $("#loadData").remove();
                      $("#favoriteMovies").slideDown("slow");
                     });
   return false;
   });
});

Разберем код сначала: когда документ будет готов, мы находим тег с id равным “loadData”. Затем, когда тэг “кликнули”, мы запускаем функцию. Сначала мы изменим свойство тэга, чтобы сказать пользователю, что информация загружается. Затем мы находим наш “container” и добавляем новый div как его потомка. Мы называем новый div “favoriteMovies”. Далее мы прячем этот див до тех пор, пока данные не загрузятся полностью.

Метод LOAD()
Метод .load загружает данные для нас. Здесь мы определяем в скобках путь. Путь указывает напрямую на страницу “theOtherPage.htm”. Затем находит список с id “favoriteMovies” и забирает эти данные. После загрузки данных вызывается функция. Она просто удаляет тэг, т.к. нам он больше не нужен, и раскрывает новый div “favoriteMovies”.

Вы можете посмотреть пример в действии и скачать пример.

Популярность: 39%