Допустим есть бд в которой мои статьи.. На главную страницу при загрузке выводится 10 статей.. В конце страници есть кнопка "загрузить еще", и вот нужно чтоб при нажатии на эту кнопку на страницу загрузились следующие записи без перезагрузки страници, но при этом нужно чтобы и первые 10 записей остались... Типа как лента в вк, гортаешь новости и когда быстро проматал вниз автоматически загружаются остальные записи но предидущие не пропадают...такая себе бесконечная лента.. Мне нужно тоже самое только без автозагрузки, а чтобы загрузка следующих 10 постов произошла по нажатию на кнопку... Кто может привести пример как это роботает...? Буду благодарен за пример кода...
1 ответ
Вот пример Аякса
$('#yourbutton').click(function(){
$.ajax({
url: 'item.php',
dataType: "JSON",
success(data){
var items='';
items='<div><h1>Привет я новая статья</h1><br><h2>я добавилась</h2>';
for(var item in data){
'<p>'+data[item]+'</p><br>';
}
items+='</div>';
$('.moreitems').html(items);
}
})
});
Вот пример PHP
$item=['Я первая статья','Я вторая статья','А я тут третъя','Ну и так далее'];
echo json_encode($item);
AJAX
запросу. Делаете кнопку,onclick = "showMoreArticles()"
. И пишете функцию, которая будет делатьAJAX
запрос на сервак, на котором вы подготавливаете к выводуhtml
с 10 статьями. Вот и всё. А поsuccsess
в блок с вашими статьями добавляете статьи из ответа.