I want to load posts by click, I have two files
I'm studying AJAX. I understand this technology so by clicking on the button an Ajax request should occur, then the handler returns the data to the Ajax request, and the Ajax query outputs this data. But I can not do it, why? How to fix the error? My error is that the posts are not loaded. The console is empty. I set the echo to the top of the handler, but it did not work. I guess the problem with ajax
index.php with ajax
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<main>
<!-- <article class="news">
<div class="picture"><img src="1news.jpg" width="300" height="300"></div>
<div class="aboutpost">
<h2 class="aboutpost-title">Пожар в торговом центре в Кемерово</h2>
<p class="aboutpost-description">Холдинг, куда входило ЧОП "Зимней вишни", прекратил работу после трагедии</p>
</div>
</article> -->
<?php
require 'infofordb.php';
$link = mysqli_connect($host, $user, $password, $database) or die("Ошибка " . mysqli_error($link));
$query ="SELECT * FROM news ORDER BY id DESC LIMIT 5";
$result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link));
$articles = array();
while($row = mysqli_fetch_assoc($result)) {$articles[] = $row;}
foreach($articles as $article) {echo '
<article class="news">
<div class="picture">
<img src="/image/'.$article[path].'">
</div>
<div class="aboutpost">
<h2 class="aboutpost-title">'.$article[title].'</h2>
<p class="aboutpost-description">'.$article[description].'</p>
</div>
</article>';}
?>
<center><button id="load">Загрузить ещё</button></center>
<script>
$(document).ready(function(){
var inProgress = false;
var start = 5;
$('#load').click(function() {
$.ajax({
url: 'handler.php',
method: 'POST',
data: {"start" : start},
dataType: 'json',
beforeSend: function() {inProgress = true;}
}).done(function(data){
data = jQuery.parseJSON(data);
alert('nen');
if (data.length > 0) {
//надо вывести
$.each(data, function(index, data){
$('main').append(
'<article class="news"><div class="picture"><img src="/image/' + data.path +
+ '"></div><div class="aboutpost"><h2 class="aboutpost-title">' + data.title +
+ '</h2><p class="aboutpost-description">' + data.description +
+ '</p></div></article>');
});
inProgress = false;
start += 5;
}
});
});
});
</script>
</main>
</body>
</html>
handler.php
<?php
include(infofordb.php);
$start = $_POST['start'];
$link = mysqli_connect($host, $user, $password, $database) or die("Ошибка " . mysqli_error($link));
$query ="SELECT * FROM news ORDER BY id DESC LIMIT {$start}, 5";
$result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link));
$articles = array();
while($row = mysqli_fetch_assoc($result)) {$articles[] = $row;}
echo json_encode($articles);
?>
dataType: 'json', tells jQuery to parse the returned JSON data. In your code, you call JSON.parse which attempts to parse it again, remove that line(this line I mean data = jQuery.parseJSON(data);).
You need to check your mysql Query in handler.php
$query ="SELECT * FROM news ORDER BY id DESC LIMIT {$start}, 5";
The curly braces does not work in query. May be this solve your problem.