Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по AJAX / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Динамическая подгрузка данных на страницу

Добрый день в данном уроке я хотел бы показать, как динамически при помощи AJAX можно подгружать контент. Делать это буду на примере комментариев с этого сайта. Вот как это все будет выглядеть: изначально на странице будет выводится 5 комментариев и кнопка, при нажатии на которую будут подгружаться следующие 5 комментариев. Наверняка вы уже встречали что-то похожее. Для работы нам пригодится библиотека jQuery, которая упрощает нам работу с AJAX.

I?eia?

Подключаем jQuery на страничку:

<script type="text/javascript" src="jquery-1.5.1.min.js"></script>

Теперь выведем на страницу первые 5 комментариев посредствами обычного PHP:

<div id="content">
<?php
include("connect.php");
$result = mysql_query("SELECT * FROM comment LIMIT 5",$db);
$comment = mysql_fetch_array($result);
$i = 1;
do{
   printf("<div class='commentBlock'>
               <div class='name'>%s. %s</div>
               <div class='text'>%s</div>
           </div>
",$i,$comment['author'],$comment['text']);
               
           $i++;
}while($comment = mysql_fetch_array($result));
?>
</div>

В файле connect.php у нас указаны параметры для подключения к базе данных.  Теперь сделаем кнопку и прелоадер, который будет появляться при нажатии на нее:

<div id="load">
<div>
Загрузить еще</div>
<img
src="loading.gif" id="imgLoad">
</div>

Добавим стилей, чтобы все это приобрело более менее симпатичный вид:

<style type="text/css">
body{
  font: 12px/150% Helvetica, 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.commentBlock{
  width:500px;
  margin: 10px auto;
  border-bottom:1px solid #999;
}
.name{
  font-weight:700;
}
#load{
  width:120px;
  height:30px;
  text-align:center;
  margin: 10px auto;
}
#load div{
   margin: 5px;
   cursor:pointer;
   background: #6483aa;
   color:#fff;
   padding: 4px 10px 4px 10px;
   border:1px solid #2f4561;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
}
</style>

Теперь начнем писать сам AJAX код, который и будет нам подгружать новые записи:

<script type="text/javascript">
$(document).ready(function(){
   $("#imgLoad").hide();  //Скрываем прелоадер
});
var num = 5; //чтобы знать с какой записи вытаскивать данные
$(function() {
   $("#load div").click(function(){ //Выполняем если по кнопке кликнули
   $("#imgLoad").show(); //Показываем прелоадер
   $.ajax({
          url: "action.php",
          type: "GET",
          data: {"num": num},
          cache: false,
          success: function(response){
              if(response == 0){  // смотрим ответ от сервера и выполняем соответствующее действие
                 alert("Больше нет записей");
                 $("#imgLoad").hide();
              }else{
                 $("#content").append(response);
                 num = num + 5;
                 $("#imgLoad").hide();
              }
           }
        });
    });
});
</script>

Начнем разбирать, что есть что. В самом начале мы скрываем наш прелоадер. Переменную num мы задаем для того чтобы знать с какой записи нам подгружать новые данные. Ее мы будем отправлять обработчику. Далее мы отслеживаем событие клика по нашей кнопке и отправляем запрос серверу. Чтобы было более понятно, рассмотрим, наш обработчик action.php, а затем снова вернемся к выше приведенному коду. Обработчик выглядит следующим образом:

<?php
include("connect.php");
if(isset($_GET['num'])){
   $num = $_GET['num'];
   $result = mysql_query("SELECT * FROM comment LIMIT $num, 5",$db); //Вытаскиваем из таблицы 5 комментариев начиная с $num
   if(mysql_num_rows($result) > 0){         
       $comment = mysql_fetch_array($result);         
       do{
          $num++;
          printf("<div class='commentBlock'>
          <div class='name'>%s. %s</div>
          <div class='text'>%s</div>
          </div>"
,$num,$comment['author'],$comment['text']);
}while($comment = mysql_fetch_array($result));
          sleep(1); //Сделана задержка в 1 секунду чтобы можно проследить выполнение запроса
     }else{
           echo 0; //Если записи закончились
     }
}
?>

Сначала  подключаемся к базе данных. Затем делаем запрос к базе данных для вывода новых комментариев. Запись LIMIT $num, 5 читается как вытащить 5 записей начиная с $num. Затем проверяем, есть ли у нас новые записи. Если да то обычным циклом выводим их на экран, если нет, то выводим 0, который будет признаком того, что записей нет.  Задержка на 1 секунду делается чисто для того чтобы можно было увидеть как работает наш скрипт. Все результаты будь они положительными (полностью сформированный HTML код с комментариями) или отрицательными возвращаются на нашу первоначальную страницу. Мы тоже вернемся к ней и продолжим разбирать ее код. Строка success - это действие, которое будет выполняться в случае удачного AJAX запроса. В нашем случае мы проверяем, если вернувшийся результат является 0 (закончились записи в таблице) выводим соответствующее сообщение и скрываем прелоадер. Если же записи есть, то с помощью метода append добавляем эти данные в самый конец контейнера <div id="content"></div>. При этом увеличиваем переменную num на 5, чтобы следующий записи выводились с 10 и скрываем прелоадер. И так далее…  Вот такой вот довольно простой код поможет осуществить динамическую подгрузку данных на страницу.

Автор: Евгений Бочкарев Урок добавлен: 25 Июня 2011 в 13:08 Просмотров: 79409

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (56)

#57 Евгений 22-10-2015 в 08:48
ZICK, скорее всего да инициализация галереии происходит, и подгруженный контент не учитывается. А что за галерея? Нужно смотреть и разбираться. Может даже и в документации что то сказано про это
#58 ZICK 23-10-2015 в 20:13
Евгений, галерея jQuery lightBox
#59 Евгений 26-10-2015 в 11:19
А как подключается через data-lightbox="roadtrip" или rel="lightbox[roadtrip]" и какая версия? А лучше ссылку где можно посмотреть.
#60 ZICK 27-10-2015 в 00:54
<div id="gallery" align="center">
<a href="kartinka.JPG">

<img src="miniatura.JPG">
</a>
$(function() {
$('#gallery a').lightBox({fixedNavigation:false});
});

версия 0.5
</div>
#61 Евгений 28-10-2015 в 09:58
Можно попробовать после загрузке еще раз вызывать $('#gallery a').lightBox(), а лучше по возможности новым подгружаемым изображениям задать отдельный класс и применять $('#gallery a.newclass').lightBox()
#62 ZICK 30-10-2015 в 14:58
Таки да, помогло, в выгрузке добавил вызов функции
#63 Бо 20-03-2016 в 08:17
А как сделать что бы записи выводились не в самом конце ,а в начале?
#64 Серго 19-09-2016 в 10:21
Бо чтобы записи выводились в начале то тебе придется во так написать mysql_query("select * from comment order by id desc limit 5");
то есть главную роль играет order by id desc (asc) desc или asc на свое усмотрение
#65 Сергей 09-01-2017 в 09:19
Здравствуйте. А можно по подробнее для начинающих: Куда закидывать файлы с исходников, в папку с самой темой или в папку с вордпресс? В какие файлы темы устанавливать скрипты? Попробовал сделать для комментариев, ни чего не работает. Помогите.
#66 Саша 20-08-2017 в 15:24
Скажите пожалуйста, в каком файле, в каком месте прописать, что бы выводились сначала новые а подгружались старые записи. А не как сейчас, сначала старые, а прогружаются новые.
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки