CS50W Network项目分页功能切换页面时加载数据错误的问题排查求助

我在CS50W的Network项目里折腾分页功能快俩月了，试了好几种方法但总有新bug冒出来。目前其他功能都正常：视图里加载帖子后传给JavaScript，loadPosts和loadProfile函数也能把fetch逻辑绑定到按钮上，按钮能触发请求、帖子也能正常显示。但核心问题是：一旦加载了个人主页的第二页，切回首页再点“下一页”，加载的居然还是个人主页的帖子！我试过用removeEventListener和标记位，但就是搞不定切换页面时怎么正确重置事件监听。

后端请求日志 #

[06/Jun/2025 09:01:10] "GET /post?start=0&end=9 HTTP/1.1" 200 825
[06/Jun/2025 09:01:10] "GET /post/new?start=0&end=9 HTTP/1.1" 200 810

页面切换的前端事件监听代码 #

// Switch between the pages:
document.querySelector("#profile-link").addEventListener('click', function(event) {
    // Top left username, to load the profile
    loadProfile(loggedInUsername)
});

document.querySelector("#index").addEventListener('click', function(event) {
    event.preventDefault();
    loadPosts()
});

后端Django视图代码 #

@csrf_exempt
def post_view(request, username = None):
    if request.method == "GET":
        # Loading all posts
        if username == None:
            posts = Post.objects.all().order_by('-date')
            start = int(request.GET.get("start") or 0 )
            end = int(request.GET.get("end") or (start + 9))
            posts_in_range = posts[start:end+1].values("text","date","user__username")
            return JsonResponse({"posts": list(posts_in_range)})
        else:
            # Loading a profile
            user = User.objects.get(username=username)
            user_id = user.id
            posts = Post.objects.filter(user_id=user_id).order_by('-date')
            start = int(request.GET.get("start") or 0 )
            end = int(request.GET.get("end") or (start + 9))
            posts_in_range = posts[start:end+1].values("text","date","user__username")
            return JsonResponse({"posts": list(posts_in_range)})

前端核心分页相关函数代码 #

loadPosts 首页帖子加载函数

// Loads all the posts on the All Posts page
function loadPosts() {
    let counter = 1;
    let start = (page - 1) * 10;
    let end = start + 9;
    if (page < 1) {
        page = 1
    }
    // Fetch all posts
    fetch(`/post?start=${start}&end=${end}`,null)
    .then(response => response.json())
    .then(data => {
        buttons(counter, `/post?start=${start}&end=${end}`)
        // Hiding buttons and content
        document.getElementById("slider").style.display = "none";
        document.querySelector("#following").innerHTML = "";
        document.querySelector("#posts").innerHTML = "";
        document.getElementById("new-post-form").style.display = "block";
        // Render posts
        data.posts.forEach(add_Post);
    })
}

loadProfile 个人主页加载函数

// Loading a profile page
function loadProfile(username, loggedInUsername) {
    let counter = 1;
    let start = (page - 1) * 10;
    let end = start + 9;
    if (page < 1) {
        page = 1
    }
    // Fetch profile posts
    fetch(`/post/${username}?start=${start}&end=${end}`)
    .then(response => response.json())
    .then(data => {
        console.log(username)
        buttons(counter, `/post/${username}?start=${start}&end=${end}`, username)
        document.getElementById("slider").style.display = "none";
        document.querySelector("#following").innerHTML = "";
        document.getElementById("new-post-form").style.display = "none";
        document.querySelector("#posts").innerHTML = "";
        // Check follow status
        checkFollow(username)
        // Handle self-profile vs others' profile
        if (username === loggedInUsername) {
            document.getElementById("slider").style.display = "none";
            if (data.posts.length > 0) {
                data.posts.forEach(add_Post);
            }
        } else {
            document.getElementById("slider").style.display = "block";
            const checkbox = document.querySelector('.switch input[type="checkbox"]');
            checkbox.addEventListener('change', function(event) {
                handleCheckboxChange(username);
            });
            if (data.posts.length > 0) {
                data.posts.forEach(add_Post);
            }
        }
    })
}

buttons 分页按钮事件绑定函数

function buttons(counter, url, username) {
    const previous = document.getElementById("previous");
    const next = document.getElementById("next");
    console.log(username)
    // Bind events for global posts pagination
    if (!username) {
        function handleNextClick() {
            counter++;
            start = (counter - 1) * 10;
            end = start + 9;
            const newUrl = `/post?start=${start}&end=${end}`
            load(counter, newUrl, start, end);
        }
        function handlePreviousClick() {
            counter--;
            start = (counter - 1) * 10;
            end = start + 9;
            const newUrl = `/post?start=${start}&end=${end}`
            load(counter, newUrl, start, end);
        }
    }
    // Bind events for profile posts pagination
    else {
        function handleNextClick() {
            counter++;
            start = (counter - 1) * 10;
            end = start + 9;
            const newUrl = `/post/${username}?start=${start}&end=${end}`
            load(counter, newUrl, start, end);
        }
        function handlePreviousClick() {
            counter--;
            start = (counter - 1) * 10;
            end = start + 9;
            const newUrl = `/post/${username}?start=${start}&end=${end}`
            load(counter, newUrl, start, end);
        }
    }
}

内容来源于stack exchange