Как сделать динамическое добавление комментариев, используя 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 файлу, отправляем заголовки с кодировкой и затем отправляем имя пользователя и текст его сообщения, кодируя русские символы. Все, теперь вы можете ввести свой комментарий, нажать кнопку отправить, и он появится в базе данных без перезагрузки страницы. На этом я заканчиваю эту статью, а в следующей мы разберем, как динамически подгружать комментарии. Эта задача также довольно нетрудная. Итак, спасибо за внимание и удачи!