如何在单击时更改SPA页码？JavaScript按钮

我有“下一步”按钮单击按钮时如何更改页码

function pagination_build(){
        const pagination_buttons = document.createElement('div');
        const next_button = document.createElement('button');
        next_button.innerHTML += 'Next'
        pagination_buttons.appendChild(next_button);
        pagination_buttons.classList.add('pagination_buttons');
        document.querySelector('#show-posts').appendChild(pagination_buttons);
        next_button.addEventListener("click", () => {
            
            load_posts();
        });
}

function load_posts(){
  document.querySelector('#page-view').style.display = 'none';
  document.querySelector('#load-profile').style.display = 'none';
  document.querySelector('#posts-view').style.display = 'block';
  document.querySelector('#show-posts').style.display = 'block';
  document.querySelector('#post-form').onsubmit = function() {
        compose_post();
    }
    fetch('/posts/all_posts') // url with that API
    .then(response => response.json())
    .then(all_posts => {
        // Loop and show all the posts.
        console.log(all_posts.post_count)
        if(all_posts.post_count > 3){
            pagination_build();
        }
        all_posts.posts.forEach(function(post) { // loop to loop over each object
            build_post(post)
        });
    });
document.querySelector('#show-posts').innerHTML = ""
}

views.py

def show_posts(request):
    all_posts = NewPost.objects.all()
    all_posts = all_posts.order_by("-date_added").all()
    all_posts_count = all_posts.count()
    paginator = Paginator(all_posts, 3)
    page_number = request.GET.get('page', 1)
    page_obj = paginator.get_page(page_number)
    return JsonResponse({
        "post_count": all_posts.count(),
        "posts": [website_post.serialize() for website_post in page_obj]
     }, safe=False)

def show_posts(request):
    all_posts = NewPost.objects.all()
    all_posts = all_posts.order_by("-date_added").all()
    all_posts_count = all_posts.count()
    paginator = Paginator(all_posts, 10)
    page_number = request.GET.get('page', 1)
    page_obj = paginator.get_page(page_number)
    return JsonResponse({
        "post_count": all_posts.count(),
        "posts": [website_post.serialize() for website_post in page_obj]
     }, safe=False)

---

我的后端处理加载哪些帖子取决于（request.get）的当前页码，但我的按钮是JavaScript，我需要在单击时更改页码。在获得帮助后，我已设法使“下一步”按钮起作用并在下一页显示帖子。

let currentPage = 0;
function pagination_build(){
        /*...*/
        next_button.addEventListener("click", () => {
            currentPage++;
            load_posts();
        });
}
function load_posts(){
    /* ... */
    fetch(currentPage ? `/posts/${ currentPage }` : '/posts/all_posts') // url with that API
    .then(response => response.json())
    .then((all_posts) => {
       window.history.pushState(null, null, `/post/${ currentPage }`);
       console.log(all_posts.post_count);
       /* ... */
    }
}

不确定这是否是最好的解决方案，欢迎任何建议

//pagination函数用于构建next按钮，每次单击next时，它都会增加我在load_posts函数中使用的currentpage number

let currentPage = 1;
function pagination_build(){
    const pagination_buttons = document.createElement('div');
    const next_button = document.createElement('button');
    next_button.innerHTML += 'Next'
    pagination_buttons.appendChild(next_button);
    pagination_buttons.classList.add('pagination_buttons');
    document.querySelector('#show-posts').appendChild(pagination_buttons);
    next_button.addEventListener("click", () => {
        currentPage++;
        load_posts();
    });
}

function load_posts(){
  document.querySelector('#page-view').style.display = 'none';
  document.querySelector('#load-profile').style.display = 'none';
  document.querySelector('#posts-view').style.display = 'block';
  document.querySelector('#show-posts').style.display = 'block';
  document.querySelector('#post-form').onsubmit = function() {
        compose_post();
    }
    console.log(currentPage)
    fetch(`/posts/all_posts?page=${currentPage}`) // url with that API
    .then(response => response.json())
    .then(all_posts => {
        // Loop and show all the posts.
        if(all_posts.post_count > 3){
            pagination_build();
        }
        all_posts.posts.forEach(function(post) { // loop to loop over each object
            build_post(post)
        });
    });
document.querySelector('#show-posts').innerHTML = ""
}

views.py

def show_posts(request):
    all_posts = NewPost.objects.all()
    all_posts = all_posts.order_by("-date_added").all()
    all_posts_count = all_posts.count()
    paginator = Paginator(all_posts, 3)
    page_number = request.GET.get('page', 1)
    page_obj = paginator.get_page(page_number)
    return JsonResponse({
        "post_count": all_posts.count(),
        "posts": [website_post.serialize() for website_post in page_obj]
     }, safe=False)

def show_posts(request):
    all_posts = NewPost.objects.all()
    all_posts = all_posts.order_by("-date_added").all()
    all_posts_count = all_posts.count()
    paginator = Paginator(all_posts, 10)
    page_number = request.GET.get('page', 1)
    page_obj = paginator.get_page(page_number)
    return JsonResponse({
        "post_count": all_posts.count(),
        "posts": [website_post.serialize() for website_post in page_obj]
     }, safe=False)

---

请向我们展示您的

load\u posts

功能。您不是总是获取所有帖子吗？您只需要获取所需的帖子（按id），并相应地更新页面内容。或者我不明白你说的更改页码是什么意思？是的，我获取所有帖子，但我的后端只返回帖子的分页，所以我需要添加一个按钮“下一步”，更改当前页码，然后我需要再次获取，我的后端方法应该通过检测当前页面来返回下一篇文章。这是对这个问题的有效回答吗？请解释您的解决方案如果我理解正确，问题在于SPA的url更改。同样，如果我理解正确，问题是在不重新加载页面的情况下更改URL，就像

window.location.href=newURL

那样。唯一的目的是在刷新时加载相同的页面，而不是在页面上重新加载（以保持应用程序的当前状态）。要么是这样，要么是我完全弄错了，如果是这样的话，我会删除它。这是真的，我需要在不刷新页面的情况下更改URL，我有点理解你的解决方案，但我需要先添加URL才能使其工作，因为目前，我在前端看到的URL只是localhost/#这是真的吗？-另外，请您解释一下零件（/[0-9]+$，页码）是如何使用的；有效吗？我想我看到了问题所在，我的答案有一部分是正确的

load_posts（）

应该是

load_posts（page=0）

和

fetch（“/posts/all_posts”）

应该变成

fetch（page | |“/posts/all_posts”）

（0 bieng解释为null）。另一方面，regExp在这里作用不大，loadPosts应该使用

window.history设置页面，方法是使用传递给
loadPosts的
page
变量设置页面