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

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

Вход на сайт


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



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


Войти на сайт

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

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

     

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


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

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

Оставляя комментарии на различных сайтах, Вы наверно замечали, что на одних при добавлении комментария происходит перезагрузка страницы (Все данные обрабатывает обработчик и перемещает обратно на ту же страницу), а на других этого не происходит и результат сразу же виден. Делается это при помощи AJAX. И в этом уроке мы подробно рассмотрим, как сделать такую форму.

Для начала скачиваем файлы, прикрепленные к этому уроку, и копируем их к себе на сайт. Теперь на странице создадим форму:

<form action="#" method="POST" enctype="multipart/form-data" name="addcom" id="addcom" onSubmit="return false">
Ваше имя:<br>
<input
name="author" type="text" size="30" class="pole" id="author"><br><br>
Текст комментария:<br>
<textarea
name="text" rows="5" cols="50" class="text"></textarea><br>
<br>
<input
name="id" type="hidden" value="<?php echo $id; ?>">
<input
class="adscom" name="button" type="button" value="Добавить комментарий" onclick="doLoad(document.getElementById('addcom'))">
</form>

Как видите в форме содержится скрытое поле id, которое нужно для того чтобы мы знали для какой именно статьи данный комментарий. Так же важно то чтобы у формы был атрибут enctype="multipart/form-data" без него ничего работать не будет.
Теперь нужно подключить между <head></head> javascript-ы для корректной работы:

<script type="text/javascript" src="js/comment.js"></script>
<script
type="text/javascript" src="js/JsHttpRequest.js"></script>

Теперь мы создаем на странице над формой специальный блок, в котором и будут отображаться результаты работы, будь то успех или ошибка. И присвоим ему идентификатор cerror

<div id="cerror"></div>

После этого мы текстовым редактором откроем файл comment.js. В этом файле в строке err=document.getElementById('cerror'); идет обращение к нашему блоку с идентификатором cerror. Следующая строка err.innerHTML = "<img src='images/upload.gif' width='32' height='8'><br><p>Ваш комментарий обрабатывается...</p>"; содержит сообщение и картинку, показываемые при обработке. Так же было бы не плохо, если бы форма очищалась при удачном добавлении комментария. Для этого пропишем следующие строки:

form = document.getElementById('addcom');
form.text.value = "";
form.author.value = "";

Сразу же укажем путь до нашего обработчика comment.php в строке req.open(null, 'comment.php', true); Сохраним изменения, если Вы их внесли и откроем файл comment.php. В самом начале у нас идет запрет на кэширование, чтобы нам не выводились предыдущие результаты. Затем идут переменные $log и $error, в которые будут заноситься ошибки. Далее идет подключение файла JsHttpRequest.php, который нужен для правильной работы и указывается кодировка. Затем идут различные проверки для введенных данных. Если они все проходят успешно, то добавляем все данные в базу и присваиваем их переменной $ok, заносим их в глобальный массив. То, что содержится в этой переменной и будет отображаться на экране. Если же произошли ошибки, то они заносятся в переменную $log и также заносятся в глобальный массив и выводятся на экран. Ну вот в принципе форма уже будет работать, осталось только разобраться с базой данных. Структура таблицы комментариев будет следующая:

Пример

В поля author, text и date будут заноситься соответственно автор, текст и дата добавления. А в поле post будет записываться id статьи, который мы передавали в скрытом поле. Чтобы мы могли получать доступ к базе данных мы должны соединиться с ней. Все настройки будут храниться в файле bd.php, который нужно подключить в самом верху страницы comment.php и index.php. Еще на главной странице index.php можно сделать вывод всех комментариев к данной статье. Для этого делаем запрос и выводим все, что имеется в цикле. Вот и все.

Источник: ruseller.com

Автор: Евгений Бочкарев Урок добавлен: 19 Августа 2010 в 17:46 Просмотров: 28061

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

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

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

#130 алексей 21-01-2016 в 10:42
спс буду пробовать
#131 Алекс 07-03-2016 в 02:14
Попробуем поставить
#132 апап 21-05-2016 в 14:20
апап
#133 Юрий 10-11-2016 в 20:55
не работает выводит ошибку undefined
#134 Александр 22-01-2017 в 19:55
Доброе время суток, все вроде работает, но почему после обновления комментарий пропадает ?
#135 Стас 28-02-2017 в 11:55
У меня тоже после обновления страницы пропадает комментарий, так и не смог разобраться, по этому решил установить готовые комментарии на сайт getrate. Быстрая установка и ни каких проблем.
#136 еке 08-04-2017 в 11:47
пспспс
#137 Евгешка 10-06-2017 в 13:11
А почаму админ не отвячяит на нашы вапросы?
#138 Andrey 999 21-07-2017 в 20:31
!!!
#139 Егор 04-09-2017 в 14:34
"А почаму админ не отвячяит на нашы вапросы?"

Потому что он где-то стырил скрипт в котором ничего не понимает сам...
Добавить новый комментарий

Автор:

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

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

cap

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


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

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

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

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