Всем привет! В этом материале я хочу рассказать вам, как сделать добавление комментариев через Ajax .
Всем привет! В этом материале я хочу рассказать вам, как сделать добавление комментариев через Ajax.
Наша система будет очень простой, чтобы показать суть, а дальше вы сможете сами все улучшить как нужно именно вам.
Для начала создайте файл index.html в корне сайта. Создайте папку libs, а в ней файл add_comment.php
Откроем файл index.html и создадим там простую форму.
<form action="" method="post">
<span>Имя: </span><br>
<input type="text" id="name"><br>
<span>Комментарий</span><br>
<textarea id="comment" cols="30" rows="10"></textarea><br>
<button id="button">Отправить</button>
</form>
Теперь создайте базу данных, у меня она называется comments. Создайте там табличку
CREATE TABLE IF NOT EXISTS `comm` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(30) NOT NULL,
`comment` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=36 ;
Теперь откроем файл add_comment.php и пропишем следующее
<?php
$name = $_POST['name'];
$comment = $_POST['comment'];
$mysqli = new Mysqli('localhost', 'root', '', 'comments');
$mysqli->query("SET NAMES utf8");
$mysqli->query("INSERT INTO `comm`(`name`, `comment`) VALUES('$name', '$comment')");
?>
Думаю, тут все понятно. Получаем данные из массива post, записываем их в переменные, подключаемся к базе данных, отправляем запрос на установление кодировки, отправляем запрос на добавление комментария.
Теперь переходим к самому интересному - javascript. Сразу после формы пишем следующее:
<script>
var button = document.getElementById('button'),
xmlhttp = new XMLHttpRequest();
button.addEventListener('click', function() {
var name = document.getElementById('name').value.replace(/<[^>]+>/g,''),
comment = document.getElementById('comment').value.replace(/<[^>]+>/g,'');
if(name === '' || comment === '') {
alert('Заполните все поля!');
return false;
}
xmlhttp.open('post', 'libs/add_comment.php', true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("name=" + encodeURIComponent(name) + "&comment=" + encodeURIComponent(comment));
});
</script>
Вот такой небольшой кусочек кода нужен для решения этой задачи. Что мы тут сделали? Давайте разберемся.
Сначала мы находим кнопку и вешаем на нее обработчик события, который при клике вызывает анонимную функцию. В анонимной функции мы получаем значения имени и комментария и сразу же убираем там все html теги. Теперь проверяем, если хотя бы одно из полей является пустым, пишем об этом автору комментария и останавливаем скрипт. Если все нормально, то подключаемся к php файлу, отправляем заголовки с кодировкой и затем отправляем имя пользователя и текст его сообщения, кодируя русские символы.
Все, теперь вы можете ввести свой комментарий, нажать кнопку отправить, и он появится в базе данных без перезагрузки страницы.
На этом я заканчиваю эту статью, а в следующей разберем, как динамически подгружать комментарии. Эта задача также довольно нетрудная.
Итак, спасибо за внимание и удачи!
