Уважаемые читатели сайта 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 Просмотров: 89174

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

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

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

#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
Скажите пожалуйста, в каком файле, в каком месте прописать, что бы выводились сначала новые а подгружались старые записи. А не как сейчас, сначала старые, а прогружаются новые.
#67 Бомбер 08-10-2017 в 11:52
Чтобы отсортировать по дате, используйте ORDER BY в вашем sql запросе --
http://www.mysql.ru/docs/man/Sorting_rows.html
#68 Jeckham 10-01-2018 в 17:44
Здравствуйте. У меня очень похожая задача, в принципе все работает. Остался такой момент: если таких форм вывода комментариев несколько, и в каждом месте комменты свои. В этом случае переменная num при аяксе получается одна на все формы, а это проблема. Пока не могу допереть, как сделать эту переменную индивидуальной для каждой формы. Буду благодарен за подсказку.
41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

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

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