1) При загрузке страницы отправляется ajax запрос на внешний файл ajax.php для того, чтобы получить список актуальных комментариев из БД и вывести их на страницу
function show() {
$.ajax({
url: "php/ajax.php",
cache: false,
success: function(html){
$("#comments_wrapper").html(html);
}
});
}
$(document).ready(function(){
show();
});
Эта часть кода работает как надо.
При заполнение форму (новый коммент) и отправке ее, я хочу обновить список комментариев без перезагрузки страницы. Для этого я использую следующий код:
var button = $(".form-comment__submit");
button.click(function(evt) {
evt.preventDefult();
var name = $("#name").value.replace(/<[^>]+>/g,''),
comment = $("#comment").value.replace(/<[^>]+>/g,'');
if(name === '' || comment === '') {
alert('Заполните все поля!');
return false;
}
$.ajax({
url: "php/ajax.php",
cache: false,
type: 'POST',
data: "name=" + encodeURIComponent(name) + "&comment=" + encodeURIComponent(comment),
success: function(html){
$("#comments_wrapper").html(html);
}
});
});
В результате при клике происходит переход на страницу ajax.php и в DOM дереве на странице находится обновленный список комментариев (то есть новый коммент попал в базу). Вопрос: почему в первом случае (при загрузке страницы) контент блока обновляется успешно , а во втором происходит переход на ajax.php? Код ajax.php прилагаю
header("Content-Type: text/html; charset=UTF-8");
date_default_timezone_set('UTC');
$db = new SQLite3('../data.sqlite');
if ($_POST) {
//var_dump($_POST);
$name = $_POST['name'];
$comment = $_POST['comment'];
$date = date("d.m.Y");
$sql = "INSERT into comments (author, content, date) VALUES ('".$name."', '".$comment."', '".$date."')";
$result = $db->query($sql);
}
$sql="SELECT * FROM comments";
$result = $db->query($sql);
$comments = array();
while($data = $result->fetchArray(SQLITE3_ASSOC)) {
$comments[] = $data;
}
$avatars = ['img/deadpool.png', 'img/logan.png'];
foreach($comments as $comment){
echo '<div class="post-item col-12">
<div class="post-item__header">
<a href="#" class="post-item__avatar">
<img src="'.$avatars[rand(0,1)].'" alt="аватар">
</a>
<div class="post-item__text">
<h3>'.$comment["author"].'</h3>
<span>'.$comment["date"].'</span>
</div>
</div>
<div class="post-item__describe">'.
$comment['content']
.'</div>
</div>';
}
Пожалуйста, помогите.. Спасибо!