为什么还要单击profile页面、主页加载以及使用django jsonResponse和javascript API fetch来显示视图

我想为主页和个人资料页面显示不同的数据。 主页应该有所有的帖子，而个人资料页面只有登录用户的页面

数据本身是正常的。我已经使用print和console.log（）在django和javascript中进行了测试

问题是当我加载配置文件页面时，主页也会再次加载，因此配置文件视图同时包含主页和配置文件帖子。而且，若我点击主页两次，我会得到两次主页上的帖子

下面是我的代码。感谢您的帮助。谢谢

Javascript:

document.addEventListener("DOMContentLoaded", function () {
  // Use button to toggle between views
  document.querySelector("#home").addEventListener("click", () => {
    load_view("home");
    document.querySelector("#happening_form").style.display = "block";
    document.querySelector("#home_view").style.display = "block";
    document.querySelector("#profile_view").style.display = "none";
  });
  document
    .querySelector("#all_posts")
    .addEventListener("click", () => load_view("all_posts"));
  document
    .querySelector("#following")
    .addEventListener("click", () => load_view("following"));
  document.querySelector("#profile").addEventListener("click", () => {
    load_view("profile");
    document.querySelector("#post_middle_container").style.display = "none";
    document.querySelector("#happening_form").style.display = "none";
    document.querySelector("#home_view").style.display = "none";
    document.querySelector("#profile_view").style.display = "block";
  });

  // Prevent default upper submit
  document
    .querySelector("#upper_post_form")
    .addEventListener("submit", function (event) {
      event.preventDefault();
    });

  // Prevent default popup submit
  document
    .querySelector("#popup_post_form")
    .addEventListener("submit", function (event) {
      event.preventDefault();
    });

  // By default, load all posts view
  load_view("home");

  // By default, load post composing form
  compose_post();
});



...........// compose and submit functions in between

function load_view(view) {
  fetch(`/posts/${view}`)
    .then((response) => response.json())
    // Get post information
    .then((posts) => {
      console.log(posts);
      for (var i = 0, len = posts.length; i < len; i++) {
        const post_content = posts[i].content;
        const post_user = posts[i].user;
        const post_timestamp = posts[i].timestamp;
        const post_like = posts[i].like;
        const post_id = posts[i].id;

        // Create div and append post to it
        const user_image = document.createElement("div");

        user_image.innerHTML =
          '<i class=" fa fa-user-circle fa-3x" aria-hidden="true"></i>';
        document.querySelector("#rows_container").append(user_image);

        const post_element = document.createElement("div");
        post_element.innerHTML = `<span>@<a class="user_link" href=""#>${post_user}</a> - posted on ${post_timestamp}</span><p>${post_content}</p>
        <form action="" method="post" id="like_form">
          <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
          <button id="like_button" type="submit" name="place_like">
          <i class="far fa-heart" aria-hidden></i></button>${post_like}
        </form><hr/>`;

        document.querySelector("#rows_container").append(post_element);

document.addEventListener（“DOMContentLoaded”，函数（）{
//使用按钮在视图之间切换
document.querySelector（“#home”）.addEventListener（“单击”，（）=>{
加载视图（“主视图”）；
document.querySelector（“#事件(u form”）.style.display=“block”；
document.querySelector（“主视图”）.style.display=“块”；
document.querySelector（“#profile_view”）.style.display=“无”；
});
文件
.querySelector（“所有职位”）
.addEventListener（“单击”，（）=>加载视图（“所有帖子”）；
文件
.querySelector（“以下”）
.addEventListener（“单击”，（）=>加载视图（“以下”）；
document.querySelector（“#profile”）.addEventListener（“单击”，（）=>{
负载视图（“剖面”）；
document.querySelector（“#post_middle_container”）.style.display=“无”；
document.querySelector（“#正在发生的形式”）.style.display=“无”；
document.querySelector（“主视图”）.style.display=“无”；
document.querySelector（“#profile_view”）.style.display=“block”；
});
//防止默认上限提交
文件
.querySelector（“#上#后#表单”）
.addEventListener（“提交”，函数（事件）{
event.preventDefault（）；
});
//防止默认弹出提交
文件
.querySelector（“弹出式表单”）
.addEventListener（“提交”，函数（事件）{
event.preventDefault（）；
});
//默认情况下，加载“所有帖子”视图
加载视图（“主视图”）；
//默认情况下，加载后期撰写表单
撰写文章（）；
});
……..//在这两者之间编写和提交函数
功能加载视图（视图）{
获取（`/posts/${view}`）
.then（（response）=>response.json（））
//获取帖子信息
。然后（（帖子）=>{
控制台日志（posts）；
for（变量i=0，len=posts.length；i
${post_like}
`；
document.querySelector（“#rows_container”）.append（post_元素）；

html:

{%if user.u经过身份验证%}

    <nav class="navbar-light" class="col-6">
                    <p><i class="fab fa-battle-net"></i></p>
                    <button id="home" class="inline_display button_margin"><i class="fas fa-home"></i><a
                            href="{% url 'index' %}">Home</a></button>
                    <div>
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item">
                                <button id="all_posts" class="inline_display button_margin"><i
                                        class="fas fa-seedling"></i>
                                    <a href="{% url 'index' %}">All
                                        Posts</a></button>
                            </li>
                            {% if user.is_authenticated %}
                            <li class="nav-item">
                                <button id="following" class="inline_display button_margin"><i
                                        class="fas fa-hashtag"></i>
                                    <a href="#">Following</a></button>
                            </li>
                            <li class="nav-item">
                                <button id="profile" class="inline_display button_margin"><i class="far fa-user"></i>
                                    <a href="">Profile</a></button>