<div id="news"> <?php require_once "connect.php"; $posts = $pdo->prepare( 'SELECT * FROM `posts` ORDER BY id DESC LIMIT :limit' ); $posts->bindParam(':limit', $limit, PDO::PARAM_INT); $posts->execute(); foreach($posts->fetchAll() as $value){ ... }?> </div>
<button id="more">Show more</button>
<script>
var limit = 1;
$('#more').click(function() {
limit += 1;
ajax();
});
var news = document.getElementById('news');
function ajax() {
$.ajax({
url: 'posts.php',
type: "POST",
data: {limit: limit},
success: function(data){
news.innerHTML = data;
},
error: function(jqXHR, exception) {
if (jqXHR.status === 0) {
alert('Not connect.\n Verify Network.');
} else if (jqXHR.status == 404) {
alert('Requested page not found. [404]');
} else if (jqXHR.status == 500) {
alert('Internal Server Error [500].');
} else if (exception === 'parsererror') {
alert('Requested JSON parse failed.');
} else if (exception === 'timeout') {
alert('Time out error.');
} else if (exception === 'abort') {
alert('Ajax request aborted.');
} else {
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}
});
}
ajax();
</script>
Problem w tym, że zamiast ładować do diva jedynie "news" ładuje się cała strona.