Всё очень просто, вам потребуется повесить обработчик на отправку формы (addEventListener
), который отменит стандартную отправку (preventDefault
) и сам отправит запрос на сервер и обработает ответ (XMLHttpRequest
). С jQuery это ещё проще (on
, preventDefault
, ajax
).
Я накидал небольшой пример. У вас всё делает один скрипт. Иногда это оправдано, но часто лучше разделить код на части. Один скрипт формирует станицу с формой, второй записывает переданные методом POST данные в базу, а третий выдаёт список записей из базы. Затем надо объеденить результаты работы всех этих скриптов на одной странице с помощью JavaScript.
index.php
<form method="post" action="/newComment.php" class="js-form">
имя<br>
<input type="text" name="name" value=""><br>
коментарий<br>
<textarea name="text"></textarea><br>
<input type="submit" value="отправить">
</form>
<div class="comments js-comments"></div>
<script>
// отдельные классы с префиксом js- позволяют не зависеть от вёрски
// на них не надо вешать никаких стилей (можно использовать id,
// но часто класс удобнее, так как позволяет создавать более одного элемента
// с таким именем на странице)
var inputName = document.querySelectorAll('input[name="name"]')[0];
var textareaText = document.querySelectorAll('textarea[name="text"]')[0];
var formEl = document.querySelectorAll('.js-form')[0]; // форма
var formMethod = formEl.getAttribute('method');
var formUrl = formEl.getAttribute('action');
var commentsEl = document.querySelectorAll('.js-comments')[0]; // блок комментариев
formEl.addEventListener('submit', function(event) {
event.preventDefault(); // отменяем стандартную отправку, будем отправлять сами
sendComment(function() {
loadComments();
});
});
loadComments(); // при загрузке сразу подтягиваем имеющиеся комментарии
function sendComment(onSend) {
var xhr = new XMLHttpRequest();
var postComments = 'name=' + inputName.value + '&' + 'text=' + textareaText.value;
xhr.open(formMethod, formUrl + '?' + postComments, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 201) {
if (onSend) {
onSend();
}
} else {
alert('Что-то пошло не так!');
}
}
};
xhr.send();
}
function loadComments() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/comments.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
commentsEl.innerHTML = xhr.responseText;
} else {
alert('Что-то пошло не так!');
}
}
};
xhr.send();
}
</script>
newComment.php
<?php
$db = new PDO('mysql:host=localhost;dbname=sitetest', 'root','123');
$db->exec("SET NAMES UTF8");
if(count($_REQUEST) > 0){
$name = trim($_REQUEST['name']);
$text = trim($_REQUEST['text']);
$name = htmlspecialchars($name);
$text = htmlspecialchars($text);
if ($name != '' && $text != '' ) {
$query = $db->prepare("INSERT INTO `comments` SET name=:name, text=:text");
$params = ['name' => $name, 'text' => $text];
$query->execute($params);
http_response_code(201); // 201 -- создано
}
}
comments.php
<?php
$db = new PDO('mysql:host=localhost;dbname=sitetest', 'root','123');
$db->exec("SET NAMES UTF8");
// сортировка по дате ORDER BY dt DESC
$query = $db->prepare("SELECT * FROM `comments` WHERE is_moderate='0' ORDER BY dt DESC");
$query->execute();
// fetchAll() вывод массива в виде таблицы
$comments = $query->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($comments);
?>