Запомнить меня
Зарегистрироваться | Забыли пароль | Не пришло письмо с активацией?


Для начинающих

bottom

Уроки

bottom

Полезное

bottom

Файлы

bottom

Видеокурс

Практический обучающий видео-курс "Основы C#"
От профессионального разработчика для начинающих и опытных программистов! videoCurs
bottom

Ссылки

bottom

Главная страница » Уроки по 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 можно сделать вывод всех комментариев к данной статье. Для этого делаем запрос и выводим все, что имеется в цикле. Вот и все.

Источник:

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

  • Currently 3.32/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 3.3/5 (всего 41 голоса)

freeCurs
Практический бесплатный мастер-класс
"Как писать программы любой сложности на языке C# под платформу .NET?"
Понравился сайт? Внесите свой вклад в его развитие?
R314489888859
41001346159934




   Комментарии к уроку (86)

12
Прохожий    Добавлено: 20-08-2010 в 19:48
У меня не получилось(
Parse error: syntax error, unexpected $end in C:\Program Files\VertrigoServ\www\mobila\lesson.php on line 239
 
34
12
Евгений    Добавлено: 20-08-2010 в 21:09
Это ошибка на сколько я знаю говорит о том что где-то не хватает закрывающейся фигурной скобки.
Да действительно у меня в исходниках в index.php (у вас lesson.php) при выводе всех комментариев не хватает скобки после строки
while ($comment = mysql_fetch_array($result));
В исходниках исправил ошибку.
Также добавил просмотр демо
 
34
12
неважно    Добавлено: 21-08-2010 в 08:58
у меня всё нормально,не выводит ошбок,но когда нажимаю добавить идёт загрузка и появляется слово undefined. Чё такое?....
 
34
12
неважно    Добавлено: 21-08-2010 в 09:06
Моя ошибка заключалась в том,что форма должна находится на блоке <div id="cerror"></div> как я понял...Такой ошибки сейчас не выдаёт,но и не добавляет комментарии,просто долго(очень долго) идёт загрузка(
 
34
12
.....    Добавлено: 21-08-2010 в 09:51
А почему в таблицув поле текст всё записывается как 00-00-00 ? и потом выводится на странице
Саша
Добавлено: 21-08-2010 в 09:48
0000-00-00
 
34
12
...    Добавлено: 21-08-2010 в 09:52
у меня оказывается поле text как date ....
 
34
12
Рамиль    Добавлено: 22-08-2010 в 10:02
У меня такая проблема,статьи находятся в таблице art а комментарии в базе comment.на странице artikles.php у меня постраничаня навигация Как написать сколько комментариев на этой статье&
 
34
12
Евгений    Добавлено: 22-08-2010 в 17:23
По поводу ошибки undefined она выводится когда прописаны неверные параметры подключения к базе данных.
Если форму добавить в <div id="cerror"></div>, то она будет исчезать после отправки, даже если будут иметься ошибки. Этот блок предназначен для вывода результатов.
 
34
12
Евгений    Добавлено: 22-08-2010 в 17:38
Рамиль, когда выводятся статьи в цикле нужно просто сделать запрос к базе на подсчет количества комментариев:
$result = mysql_query("SELECT COUNT(*) FROM comment WHERE post='$id'");
$com = mysql_fetch_array($result);
Количество комментариев будет в переменной $com[0]
 
34
12
pembrock    Добавлено: 20-11-2010 в 11:52
У меня не обрабатывает и не выводит русские буквы. Например если ввести цифры или английские буквы вперемешку с русскими то выводит только английские. в чем проблема? и как исправить можно?
 
34
12
Евгений    Добавлено: 20-11-2010 в 12:59
Это кодировка проблема обычно возникает на локальном сервере. Все исходные файлы сохранены в utf-8. Чтобы русские буквы нормально отображались нужно изменить кодировку на windows-1251. Кодировку легко можно поменять в редакторе Notepad++
 
34
12
иван    Добавлено: 07-12-2010 в 19:10
у меня по какой-то причине не передаются данные, все время ошибка введите имя и текст
 
34
12
иван    Добавлено: 07-12-2010 в 19:45
непрвильно подключил JsHttpRequest. Но теперь не добавляет комментарии,просто идёт загрузка все время
 
34
12
Андрей    Добавлено: 12-12-2010 в 20:39
Чтобы всё было ок :) (НА РУССКОМ ЯЗЫКЕ), пишем вверху каждого php документа (которого скачали из исходников) вот что:
<?PHP header("Content-Type: text/html; charset=utf-8");?>
 
34
12
Я    Добавлено: 18-12-2010 в 13:19
Клоассный и легкий урок
 
34
12
Сергей    Добавлено: 20-12-2010 в 00:27
Интегрировал в это защиту! )))
 
34
12
Проблемный    Добавлено: 24-12-2010 в 01:33
А у меня не добовляет коментарий, пишет что "ваш коментарий обрабатывается"
 
34
12
окаро    Добавлено: 26-12-2010 в 20:05
а у меня не добавляется, надо перезагрузить страничьку чтобы пойвилось
 
34
12
Сергей    Добавлено: 11-01-2011 в 20:54
Огромное спасибо!
 
34
12
Алексей    Добавлено: 12-01-2011 в 14:37
Тест
 
34
12
Александр    Добавлено: 13-01-2011 в 14:59
спасибо!
 
34
12
Алексей    Добавлено: 18-01-2011 в 22:44
спасибо!
 
34
12
Александр    Добавлено: 19-01-2011 в 16:33
Я всё подключил, всё работает. Но почему из базы не выводятся прошлые комментарии, а показывается только текущее?
 
34
12
Александр    Добавлено: 19-01-2011 в 16:33
Я всё подключил, всё работает. Но почему из базы не выводятся прошлые комментарии, а показывается только текущее?
 
34
12
Василий    Добавлено: 19-01-2011 в 16:39
Спасибо
 
34
12
Евгений    Добавлено: 19-01-2011 в 16:47
Александр, вывод предыдущих комментариев должен осуществляться в цикле при помощи php кода, который должен идти до формы с комментариями или вы имеете виду что не выводятся несколько сразу добавленных комментариев, то в этом случае так и будет поскольку блок <div id="cerror"></div> постоянно очищается и в него выводятся новые комментарии.
 
34
12
Александр    Добавлено: 19-01-2011 в 17:30
О! Всё, разобрался, всё отлично работает!
Ещё вопрос относительно безопасности. На сколько безопасен данный скрипт?
 
34
12
John    Добавлено: 20-01-2011 в 09:08
Надо добавить проверку входящих данных. Ибо нет проверки того, что отправляет юзер из формы.

это уже в файле получающему POST запрос надо перед запросом в БД сделать проверку входящих данных. гуглите и все найде.
типо strip_tags и т.д..
 
34
12
Евгений    Добавлено: 20-01-2011 в 13:48
Совершенно верно для повышения безопасности нужно проверять отправляемые данные пользователя в обработчике comment.php, поскольку юзер может ввести и html и javascript код. Можно использовать функцию
htmlspecialchars - преобразует теги в спецсимволы, которые не будут распознаваться браузером как html код.
stripslashes - удаляет экранирование символов.
 
34
12
Александр    Добавлено: 20-01-2011 в 20:08
Евгений, ну почему? В comment.php есть проверка. htmlspecialchars, addslashes. Вот только strip_tags нет.
 
34
12
Александр    Добавлено: 20-01-2011 в 20:08
Или я что-то не понимаю?
 
34
12
Евгений    Добавлено: 20-01-2011 в 20:42
Просто у меня не написан strip_tags, но желательно его использовать.
 
34
12
Александр    Добавлено: 21-01-2011 в 16:59
А как можно организовать контроль добавления комментариев через определённое время. К примеру добавлять комменты можно интервалом 2 минуты.
 
34
12
ЧинГИС    Добавлено: 22-01-2011 в 00:14
ОООчень полезный урок...
 
34
12
ЧинГИС    Добавлено: 22-01-2011 в 00:16
да уж нет слов, убедился только что, что Ajax СУПЕР..))
 
34
12
Владимир    Добавлено: 11-02-2011 в 14:20
Извините за глупый вопрос: а в форме заполнения так и надо писать action="#" или вместо решетки указать файл-обработчик?
И потом: как-то поверхностно описано подключение к БД при помощи файла bd.php, я пытался разобраться, перепробовал способов, наверное, 30, но все равно результат - undefined:(
База у меня называется example, таблица - comment в ней 5 полей: id,author, text, date и post. В файле bd.php прописано:
$db = mysql_connect("localhost","user","password");
mysql_select_db("example",$db);
mysql_query("SET NAMES utf8");
Больше в исходных файлах ничего не менял.
 
34
12
Евгений    Добавлено: 11-02-2011 в 22:52
В action так и оставляете, а файл обработчик прописывается в comment.js. В bd.php все правильно там только подключение и все. А файл JsHttpRequest.php случайно не удалили?
 
34
12
Владимир    Добавлено: 12-02-2011 в 06:16
JsHttpRequest.php на месте. Пытался вводить данные с ошибками
(не заполнял поле "Ваше имя", вводил длинные слова и т.д.), но никаких сообщений об ошибках не появляется, только по прежнему - undefined. Возникло подозрение что какая-то проблема с файлом comment.php, но я в нем ничего не менял.
А не может быть причина в тестовом сервере? У меня denwer3 установлен.
 
34
12
Владимир    Добавлено: 12-02-2011 в 12:43
Хм. Решил в виде эксперимент залить файлы на сервер - оказалось все работает как надо. Единственно с кодировкой utf-8 проблемы + выводит по одному комментарию (а предыдущие куда-то исчезают). Но это уже мелочи. Остаётся неясным как тестировать странички на своем компьютере.
 
34
12
Евгений    Добавлено: 12-02-2011 в 12:55
Владимир, дело не должно быть в денвере сам им пользуюсь у меня все работало. Да тут к сожалению так и есть когда добавляешь несколько комментариев подряд, то они друг друга "затирают", но в базу нормально добавляются. По поводу кодировки если у вас база в windows-1251, чтобы не мучатся просто все файлы пересохраните в этой кодировке включая javascript, а строку mysql_query("SET NAMES cp1251"); можно вообще убрать или подставить кодировку cp1251
 
34
12
antosha23    Добавлено: 15-02-2011 в 16:24
проверка перезагрузки страницы
 
34
12
Ник    Добавлено: 23-03-2011 в 20:00
Все офигительно, кодировка зависит от рук создателя таблицы. но что то я не понял как выводить все записи...
 
34
12
senia    Добавлено: 23-03-2011 в 23:08
спс пригодилось
 
34
12
Вася    Добавлено: 24-03-2011 в 08:21
а капчу как прилепили?
 
34
12
привет    Добавлено: 24-03-2011 в 15:07
никак не работает, пишет ундефинед
 
34
12
сергей    Добавлено: 24-03-2011 в 15:07
норм !
 
34
12
Евгений    Добавлено: 24-03-2011 в 20:33
Если самую простейшую капчу типа ответ на вопрос сделать очень легко. Просто создается отдельное поле в которое вводится ответ и затем проверяется на стороне сервера.
 
34
12
adios    Добавлено: 30-03-2011 в 09:05
А сообщение то в базу не лызит (((((
 
34
12
antosha23    Добавлено: 02-04-2011 в 01:22
супер б но только но локальном компе выводится ошибка undefined. Путь к файлу bd.php правильный
 
34
12
BakTi    Добавлено: 03-04-2011 в 19:17
Удалять можно чужие комментарии ?
---
Через БД только :)
 
34
12
BakTi    Добавлено: 03-04-2011 в 21:13
Хороший урок
 
34
12
ДЕМОН    Добавлено: 09-04-2011 в 18:00
в обработчике 10-я строчка $log =="";
это ошибка (с двумя знаками равнства) или так должно быть??
 
34
12
Евгений    Добавлено: 09-04-2011 в 18:23
По идее там должно быть один знак =. Изначально эта переменная $log пуста и потом по мере проверок она наполняется ошибками если они есть.
 
34
12
ДЕМОН    Добавлено: 09-04-2011 в 19:32
можно ли как нибудь обновить капчу (выдать новую), при неправильном вводе? чтоб исключить брут (перебор).
у меня сейчас комментарии добавляются без Ajax. хочу переделать под Ajax. так вот у меня сейчас в обработчике проверяется если значение капчи переданное через POST не совпадает со значением в SESSION, то в SESSION уничтожается (чтоб потом генерировалась новая) а пользователь перенаправляется обратно на страницу формы где ему и выдается новая капча (ибо в SESSION пусто).
но с Ajax страница обновляться не будет. как в таком случае сгененрировать новую капчу?
 
34
12
ДЕМОН    Добавлено: 09-04-2011 в 23:38
в comment.js есть строчка
else {err.innerHTML = req.responseJS.er_mess;}
это действие выполняется когда обработчик возвращает ошибку? если да, то я бы мог добавить туда свою команду для обновления капчи. я правильно понимаю?
 
34
12
Евгений    Добавлено: 09-04-2011 в 23:53
Не пробовал ставить такую капчу. У меня есть урок по созданию капчи которая случайно генерируется но привязать к форме с ajax не пробовал. Вообще думаю что можно ее прикрутить.
 
34
12
ДЕМОН    Добавлено: 10-04-2011 в 00:47
капча у меня есть. если точнее, то в форме есть img у которого в качестве src указан php скрипт (генератор картинки с рандомным значением). я просто думал как же мне сделать автообновление капчи (при ошибке), но потом вспомнил что у меня стоит кнопочка для ручного обновления капчи, и можно взять действие этой кнопочки (document.getElementById(captcha).src=путь к генератору для генерации новой капчи) и использовать для автообновления.
только вот куда запихнуть чтоб при ошибке оно выполнилось?
в comment.js есть строчка else {err.innerHTML = req.responseJS.er_mess;}
мне кажется это задано действие, которое будет выполняться если обработчик вернет ошибку. если это так, то можно как раз запихнуть сюда document.getElementById(captcha).src=...
 
34
12
ДЕМОН    Добавлено: 10-04-2011 в 11:06
скрипты у вас кривые. выдает undefined. подключение к базе тут не причем. в базу добавлять пока ниче не собираюсь, следовательно подключение вообще не нужно. пока что мне нужен только вывод ошибок. как избавиться от этого undefined?
 
34
12
ДЕМОН    Добавлено: 10-04-2011 в 11:26
кстати этот косяк только на локальном компе. на сервере всё норм. но нужно чтоб и на локальном работало
 
34
12
ДЕМОН    Добавлено: 10-04-2011 в 16:02
в обработчике есть строчки
$cod = addslashes($cod);
$cod = htmlspecialchars($cod);

что это ещё за $cod?? откуда она взялась?? вот из-за таких неопределенных переменных и получается undefined.
 
34
12
ДЕМОН    Добавлено: 10-04-2011 в 16:34
ещё пару косяков:
при добавлении комментария в базу не проверяется прошел ли запрос. коммент может не добавиться, хотя будет написано мол добавлен. это можно наблюдать, если попробовать написать сюда коммент с адинарными ковычками.
также нету обработки переменных через mysql_escape_string, что создает уязвимость.
 
34
12
Дамир    Добавлено: 10-04-2011 в 23:05
Вот тоже дошел до комментариев... Вопрос
А как сделать чтобы сохранялись переносы строки? Например мне нужно сохранить некоторые знаки табуляции?
 
34
12
Евгений    Добавлено: 10-04-2011 в 23:15
Табуляцию можно сохранить так:
это строка ставится перед добавление сообщения в базу
$text=str_replace("\n","<br>\n",$text);
В результате в базе сохранятся все переносы.
 
34
12
Сергей    Добавлено: 23-04-2011 в 21:43
нда, защита классная у вас тут ))))
 
34
12
Владимир    Добавлено: 30-04-2011 в 23:52
Спасибо за статью
 
34
12
Алексей    Добавлено: 08-07-2011 в 23:07
У меня два вопроса:

1. Таблица с комментариями будет заполняться одна на все страницы? Если у меня много страниц, мне делать столько же таблиц в MySQL или это где-то прописывается?

2. Подскажите где прописать стили для выводимых сообщений? (Чтобы было как на этом сайте - каждый комментарий в отдельном div)
 
34
12
Алексей    Добавлено: 08-07-2011 в 23:14
Где задается id статьи, к которой выдаются комментарии?
 
34
12
Евгений    Добавлено: 10-07-2011 в 13:50
При создании таблицы со статьями нужно создавать данное поле id, которому поставить атрибут AUTO_INCREMENT (для генерации уникального идентификатора, т.е. оно будет само заполняться числами по порядку). И это значение указывать в таблице комментариев, чтобы знать к какой статье относится комментарий.
 
34
12
Hazard    Добавлено: 12-07-2011 в 01:51
Евгений, а почему не можна сделать так, что б можна больше коментов добавлять, а не один, оно так добавляет тогда, когда перезагружаеш страницу. И как сделать так, что б, напремир, добавив коментар, при нажатия кнопки, у блоке 'последние коментарие' появилса етот коментар?(извените за неграмотность, и спосибо)
 
34
12
Евгений    Добавлено: 16-07-2011 в 10:52
просто этот скрипт первоначально предназначался для формы обратной связи, поэтому один коментарий ”стирает” другой хотя в базу добавляются оба. В дальнейшем в планах написать урок, исправив эти недочеты и применив для облегчения jquery
 
34
12
Игорь    Добавлено: 26-07-2011 в 21:10
Полезный урок! Всё понятно=)
 
34
12
Yra    Добавлено: 02-08-2011 в 03:11
спасибо
 
34
12
Klim    Добавлено: 10-08-2011 в 22:54
сорри за глупый вопрос, но я так и не понял как подключить БД...если это просто вставить
<script type="text/javascript" src="js/comment.js"></script>
<script type="text/javascript" src="js/JsHttpRequest.js"></script>
.... я скачал ваши исходники и поместил на на хостинг без каких-то изменений...всеравно undefined...
помогите плиз чайнику...
 
34
12
Fokir    Добавлено: 17-08-2011 в 18:23
хороший урок
 
34
12
mlm    Добавлено: 29-08-2011 в 17:17
а у меня не добавляется, надо перезагрузить страницу чтобы появилось
 
34
12
alex    Добавлено: 29-08-2011 в 22:30
почему комменты обновляются только после того как я сам вручную обновлю страницу
 
34
12
Евгений    Добавлено: 30-08-2011 в 10:36
что-то не правильно делаете. Больше сказать ничего не могу, т.к. Причин много может быть
 
34
12
alex    Добавлено: 30-08-2011 в 11:03
всё равно спасибо за ответ. Здесь комменты точно так сделаны?
 
34
12
Евгений    Добавлено: 30-08-2011 в 15:09
Если разбираетесь в jQuery, то можно доделать скрипт Отправка сообщений при помощи AJAX, который есть на сайте. Чуть позже я хотел доделать этот скрипт под комментарии и потом опубликовать.
 
34
12
vac9    Добавлено: 31-08-2011 в 17:56
из-за чего могут не добавляться комментарии: все файлы на месте, подключение к бд работает, ошибки не выдаёт, просто пишет "Ваш комментарий обрабатывается..." и всё, не чего не происходит...
 
34
12
alex    Добавлено: 01-09-2011 в 02:14
Честно говоря не разбираюсь не jQuery не js

А примерно когда будет урок с использованием jQuery
 
34
12
elm    Добавлено: 25-09-2011 в 15:54
здесь так же работает?
 
34
12
elm    Добавлено: 25-09-2011 в 15:55
коммент
 
34
12
elm    Добавлено: 25-09-2011 в 15:56
тест: а два коммента подряд можно добавить*?
 
34
12
elm    Добавлено: 25-09-2011 в 15:57
некорректно работает метод, без перезагрузки после добавления очередного коммента всегда вижу только последний(((
 
34
12
Евгений    Добавлено: 25-09-2011 в 16:45
Здесь комментарии работают немного по другому, поэтому виден только последний. Но в базе они все сохраняются.
 
34
12

   Добавить комментарий


Ваше имя:


Текст комментария:

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


 
34