Подгрузка контента с другой страницы на jQuery

Подгрузка контента с другой страницы на jQuery

01.09.201616601admin

Об этой возможности jQuery я решил написать по той причине, что она лежит в основе множества скриптов для uCoz. Будь то подгрузка материалов на персональную страницу, будь то статус пользователя в комментариях, зачастую даже в названии присутствует слово подгрузка. Здесь же рассмотрим эту функцию как основу, вне частных случаев.

Хотя… Без частных случаев некоторые не смогут понять весь потенциал данного функционала. Выше уже упоминались скрипты, которые этот самый функционал используют, вот вам еще несколько:

Все эти скрипты используют тот код, которому посвящен данный материал, собственно они преимущественно из него и состоят.

Основа основ

Чтобы подгрузить DIV или содержимое какого-либо элемента с другой страницы,
используйте jQuery-функцию get:

Код
<div id="loadcontent">Загрузка...</div>

<script type="text/javascript">  
$.get('http://yraaa.ru/index/8-4', function (data) {  
  $('#loadcontent').html( $('.country', data).html() )
});  
</script>

loadcontent – куда подгружать контент;

http://yraaa.ru/index/8-4 – откуда подгружать контент;

.country – класс или ID конкретного элемента с указанной ссылки.

Что и куда загружаем

Это же можно сделать с помощью jQuery-функции load:

Код
<div id="loadcontent">Загрузка...</div>

<script type="text/javascript">  
  $('#loadcontent').load('http://yraaa.ru/index/8-4 .country');
</script>

Здесь класс или ID, содержание которого мы хотим подгрузить, прописывается сразу после ссылки.

Подгрузка несколько одинаковых DIV

Подгрузка ряда контента с одинаковыми атрибутами осуществляется с помощью each:

Код
<div id="loadcontent"></div>  

<script type="text/javascript">  
$.get('http://yraaa.ru/index/8-4', function (data) {  
  $('.table_left', data).each(function (i,index) {  
  $('#loadcontent').append( $(this).html() );
  });  
});  

</script>

loadcontent – куда подгружать контент;

http://yraaa.ru/index/8-4 – откуда подгружать контент;

.table_left – класс элементов с указанной ссылки.


Помимо класса и ID можно использовать и другие конструкции, вот несколько примеров:

$('.country', data).parent() – родительский элемент для country;

$('.country', data).parent().parent() – родитель родителя country и т.д.;

$('div:contains("Новый")', data)DIV содержащий в себе текст Новый.

$('div[style="color:#FF0000"]', data).parent().parent()DIV с аттрибутом style.


Ограничения. Не злоупотребляйте данной функцией, uCoz например, имеет вшитые лимиты, перейдя за которые можно получить блокировку сайта на час, но только непосредственно у одного пользователя. Не делайте больше трех запросов одновременно и не делайте их слишком часто.


На Урааа и других тематических ресурсах много однотипных скриптов в плане кода, разнятся только идеи. Вы тоже можете придумать на основе кода ниже что-то новенькое, что-то свое.

Пишите в комментариях что и куда можно вывести, свои идеи, или для чего вам понадобился скрипт вывода контента с другой страницы.




Сохраните в социальную сеть
Комментарии (1)
Roman Spirt 28.10.2016 в 17:56Спам
как можно подгрузить скрипт с другой страницы? С обычным текстом у меня всё вышло.
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт