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

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

Вход на сайт


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



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


Войти на сайт

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

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

     

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


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

Добавление комментариев без перезагрузки страницы

Данный урок я хотел бы посвятить комментариям без перезагрузки страницы. На сайте уже имеется урок «Отправка сообщений при помощи AJAX» и это урок будет дополнением к нему. В том уроке у нас просто данные отправлялись на сервер, заносились в базу и выводилось сообщение об успешной отправке. В этом уроке мы сделаем, чтобы добавляемые комментарии сразу же появлялись на странице.

Для начала мы создадим блок на странице в котором будут отображаться все предыдущие комментарии и появляться новые.

<div id="commentBlock"></div>

Делаем вывод предыдущих сообщений

<?php
$result = mysql_query("SELECT * FROM messages",$db);
$comment = mysql_fetch_array($result);
do{
echo "<div class='comment'>Автор: <strong>".$comment['author']."</strong><br>".$comment['message']."</div>";
}while($comment = mysql_fetch_array($result));
?>

Можно добавить немного стилей для более красивого вида

.comment{
   border:1px solid #666;
   margin:10px;
   padding:10px;
   font-family:Tahoma;
   font-size:12px;
   border-radius:4px;
   box-shadow:2px 2px 2px #999;
}

При отправки комментарий на сервер у нас в ответ приходит цифра, которая определяет статус доставки (0 – отправлено; 1- Не отправлено; 2-пустое сообщение ). Далее у нас шло условие если сообщение отправлено (статус 0), то мы очищаем поля. Именно здесь мы и допишем код для обновления комментариев на странице. Осуществлять это будем с помощью свойства append, которое добавляет данные в самый конец выбранного элемента. Автор и текст у нас уже хранятся в переменных author и message соответственно.

$("#commentBlock").append("<div class='comment'>Автор: <strong>"+author+"</strong><br>"+message+"</div>");

Вот весь код. Теперь, при успешном добавлении комментария в базу оно мгновенно отобразится на странице.

Автор: Евгений Бочкарев Урок добавлен: 10 Сентября 2011 в 15:20 Просмотров: 37934

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

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

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

#129 Бо 23-03-2016 в 12:28
#128 Капоне > Да, так и есть но сообщение в начале всё-равно появляется только после того как страницу перезагрузить.Я уже разобрался для того что бы сообщение в вершу появлялось нужно отдельный блок создавать для сообщений которые появляются сразу после того как нажал клавишу отправить
#130 Бо 23-03-2016 в 16:56
Даже не надо оказывается не каких дополнительных блоков создавать просто меняем свойство append на prepend и всё сообщения добавляются в начале ,а не как тут в конце,а то не удобно это да и тупо как то
#131 вова 20-09-2016 в 20:53
hello world!!!
#132 Артур 02-11-2016 в 18:06

Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/u362890184/public_html/avatars/connect.php on line 2

Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in /home/u362890184/public_html/avatars/index.php on line 41
#133 Vasya 06-11-2016 в 21:58

<script>alert('авава')</script>


#134 Оксана 27-12-2016 в 01:45

Прямы поставки цветов. Эквадорская роза.
скайп
ecuamove

Инстаграмм ecuamove
https://vk.com/public79599924
#135 привет 22-02-2017 в 15:43
Как
#136 Никита 12-03-2017 в 09:54
Спс
#137 ZEn 30-03-2017 в 14:59
Прикольно
#138 999 21-05-2017 в 17:24
После обновления страницы комментарии исчезают, что делать?
Добавить новый комментарий

Автор:

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

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

cap

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


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

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

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

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