Получить данные с сервера с помощью API-интерфейса выборки ⇐ Html

[Anonymous]

Я получаю данные с сервера с помощью API-интерфейса выборки, он содержит html, когда я нажимаю кнопку «Загрузить больше сообщений», он должен загрузить html в нижней части страницы, которую мы получили с сервера, но он также загружает заголовки, которые мы написали для текущей страницы (список сообщений), и даже другие элементы каждый раз с нуля, в то время как я не писал ничего, кроме сообщений, которые мы должны получить. если мы выбрали загрузку большего количества сообщений, пост-фрагмент будет загружен внизу текущей страницы. он делает это, но также считывает тег шаблона из списка сообщений, содержащий заголовки. в общем, каждый раз, когда с сервера отправляется пост-фрагмент, текущая страница считывается с первой строки вместе с сообщениями, которые мы получили от пост-фрагмента, но мы определили в представлении, что если запрос имеет тип XML, отправлять только пост-фрагмент.

• views.py

def post_list(request):
posts = Post.objects.all()
page = request.GET.get('page')
paginator = Paginator(posts, 1)
try:
posts = paginator.page(page)
except PageNotAnInteger:
posts = paginator.page(1)
except EmptyPage:
posts = []
if request.headers.get("x-request-with") == "XMLHttRequest":
return render(request, "social/posts-fragment.html", {"posts": posts})
context = {'posts': posts}
return render(request, "social/posts-list.html", context)

• список сообщений (текущая страница)

{% extends 'parent/base.html' %}
{% block title%} posts list {%endblock%}
{% block content %}

{% for post in posts %}
{{post.description}}
Published at {{post.created}} by {{post.author}}
{% endfor %}

load more posts

var page = 2;
function loadMore(){
var url = '{% url "social:post_list" %}' + '?page=' + page;
fetch(url, {
method: 'GET',
headers: {
'content-type': 'text/html', 'x-requested-with': 'XMLHttpRequest'
},
}).then(function(response){
return response.text();
}).then(function(html){
document.querySelector(".posts").insertAdjacentHTML("beforeend", html);
page++;
})
}
var btnLoadMore = document.querySelector(".load-more");
btnLoadMore.addEventListener("click", loadMore);

{% endblock %}


Подробнее здесь: https://stackoverflow.com/questions/798 ... -fetch-api