Django ajax как добавить дополнительную функциональность?

Я реализую ajax для обновления данных в реальном времени на моей html странице без обновления или перезагрузки страницы. Теперь я думаю добавить функциональность для загрузки большего количества контента при нажатии на кнопку "Загрузить больше" или прокрутке вниз. Сейчас все содержимое отображается на html-странице. Предположим, у меня есть 100 объектов, и я хочу загружать только 10 объектов за один раз. Если пользователь нажмет на кнопку "Загрузить еще" или прокрутит страницу вниз, то будет загружено еще 10 объектов. вот мой код:

views.py

class PostJsonListView(View):
    def get(self, *args, **kwargs):

        posts = list(Blog.objects.all().filter(is_published='published') )
        data = list()
        for i in posts:
            blog_cover_image = None
            if i.blog_cover_image:
                blog_cover_image = i.blog_cover_image.url
           
            data.append({'author_first_name':str(i.author.first_name),'author_last_name':str(i.author.last_name),'blog_cover_image':blog_cover_image,'title':i.title,'body':i.body,'slug':i.slug,'created_at':i.created_at.strftime("%A, %d. %B %Y %I:%M%p")})
            
          
       
        return JsonResponse({'data':data},safe=False)

html

<script>

 

const postsBox = document.getElementById('posts-box')

$(document).ready(function(){
        setInterval (function(){
        $.ajax({
            url: '/posts-json/',
            type: 'get',
            success: function (response){
                $("#posts-box").empty();
                for (var key in response.data){
                console.log(response.data[key].title)
                
                if (response.data[key].blog_cover_image){
                postsBox.innerHTML += `<div class="card mb-4">
                                                <img class="img-fluid rounded"  style="max-height:300px;max-width:900px;"  src=${response.data[key].blog_cover_image} alt="..." />
                                   <div class="card-body">
                                <h2 class="card-title"><a href=${response.data[key].slug}>${response.data[key].title}</a></h2>
                                 
                                <a class="btn btn-primary" href=${response.data[key].slug}>Read More →</a>
                               </div>           
                                 
                               <div class="card-footer text-muted">
                                Posted on (${response.data[key].created_at})
                                <div class="author">${response.data[key].author_first_name}&nbsp${response.data[key].author_last_name}</div>
                               </div>
                               
                               </div>`


                }
              else{
                postsBox.innerHTML += `<div class="card mb-4">
                                                <img class="img-fluid rounded"  style="max-height:300px;max-width:900px;" src="https://via.placeholder.com/900x300" alt="..." />
                                  <div class="card-body">
                                <h2 class="card-title"><a href=${response.data[key].slug}>${response.data[key].title}</a></h2>
                                
                                <a class="btn btn-primary" href=${response.data[key].slug}>Read More →</a>
                               </div>  
                               
                               <div class="card-footer text-muted">
                                Posted on (${response.data[key].created_at})
                                <div class="author">${response.data[key].author_first_name}&nbsp${response.data[key].author_last_name}</div>
                               </div>
                               


                               </div>`
              }
            
            
            }
            

            }

        })},1000)


})

Вернуться на верх