Django，如何在JavaScript中使用fetch和PUT更新我的以下列表？

我在views.py中有一个将用户添加到以下列表的方法， 每当我点击我在JavaScript中添加的“follow”按钮时，我都试图让它工作

function load_user_info(user_clicked_on){
    document.querySelector('#page-view').style.display = 'none';
    document.querySelector('#posts-view').style.display = 'none';
    document.querySelector('#show-posts').style.display = 'none';
    document.querySelector('#load-profile').style.display = 'block';

    fetch(`/profile/${user_clicked_on}`)
        .then(response => response.json())
        .then(profile => {
            const profile_element = document.createElement('div');
            const followers = document.createElement('div');
            const following = document.createElement('div');
            const follow_button = document.createElement('button');
            follow_button.innerHTML += "Follow";
            followers.innerHTML = 'Followers: ' + profile.followers;
            following.innerHTML = 'Following: ' + profile.following;
            profile_element.appendChild(followers);
            profile_element.appendChild(following);
            profile_element.appendChild(follow_button);
            profile_element.classList.add('profile_element');
            follow_button.addEventListener("click", () => {
                follow_user(user_clicked_on)
             });
            document.querySelector('#user-profile').appendChild(profile_element);
        });
    document.querySelector('#user-profile').innerHTML = `<h3>${user_clicked_on.charAt(0).toUpperCase() + user_clicked_on.slice(1)} Profile</h3>`;
}

function follow_user(user_to_follow){
    // to make this function work with the one in views.py
    fetch(`/profile/${user_to_follow}`, {
        method: 'PUT',
    })
}

如何使JavaScript中的Follow按钮转到myviews.py方法onclick

views.py方法

def follow(request, profile_to_follow):
    try:
        user_to_follow = User.objects.get(username=profile_to_follow)
        user_to_following = Profile.objects.get(user=request.user.id)
    except User.DoesNotExist:
        return JsonResponse({"error": "Profile not found."}, status=404)
    if request.method == "PUT":
        user_to_following.following.add(user_to_follow)
        return HttpResponse(status=204)

url.py

# API Routes
path("posts", views.compose_post, name="compose_post"),
path("posts/all_posts", views.show_posts, name="show_posts"),
path("posts/<int:post_id>", views.post, name="post"),
path("profile/<str:profile>", views.display_profile, name="profile"),
path("<str:profile_posts>/posts", views.display_profile_posts, name="profile_posts"),
path("follow/<str:user_to_follow>", views.follow, name="follow"),

#API路由
路径（“posts”，views.compose\u post，name=“compose\u post”），
路径（“posts/all_posts”，views.show_posts，name=“show_posts”），
路径（“posts/”，views.post，name=“post”），
路径（“profile/”，views.display_profile，name=“profile”），
路径（“/posts”，views.display_profile_posts，name=“profile_posts”），
路径（“follow/”，views.follow，name=“follow”），

JavaScript

function load_user_info(user_clicked_on){
    document.querySelector('#page-view').style.display = 'none';
    document.querySelector('#posts-view').style.display = 'none';
    document.querySelector('#show-posts').style.display = 'none';
    document.querySelector('#load-profile').style.display = 'block';

    fetch(`/profile/${user_clicked_on}`)
        .then(response => response.json())
        .then(profile => {
            const profile_element = document.createElement('div');
            const followers = document.createElement('div');
            const following = document.createElement('div');
            const follow_button = document.createElement('button');
            follow_button.innerHTML += "Follow";
            followers.innerHTML = 'Followers: ' + profile.followers;
            following.innerHTML = 'Following: ' + profile.following;
            profile_element.appendChild(followers);
            profile_element.appendChild(following);
            profile_element.appendChild(follow_button);
            profile_element.classList.add('profile_element');
            follow_button.addEventListener("click", () => {
                follow_user(user_clicked_on)
             });
            document.querySelector('#user-profile').appendChild(profile_element);
        });
    document.querySelector('#user-profile').innerHTML = `<h3>${user_clicked_on.charAt(0).toUpperCase() + user_clicked_on.slice(1)} Profile</h3>`;
}

function follow_user(user_to_follow){
    // to make this function work with the one in views.py
    fetch(`/profile/${user_to_follow}`, {
        method: 'PUT',
    })
}

函数加载用户信息（用户点击打开）{
document.querySelector（“#页面视图”）.style.display='none'；
document.querySelector（'#posts view'）.style.display='none'；
document.querySelector（'#show posts'）.style.display='none'；
document.querySelector（“#加载配置文件”）.style.display='block'；
fetch（`/profile/${user\u clicked\u on}`）
.then（response=>response.json（））
。然后（配置文件=>{
const profile_element=document.createElement（'div'）；
const followers=document.createElement（'div'）；
const following=document.createElement（'div'）；
const follow_button=document.createElement（'button'）；
follow_button.innerHTML+=“follow”；
followers.innerHTML='followers:'+profile.followers；
following.innerHTML='following:'+profile.following；
profile_元素appendChild（followers）；
profile_元素appendChild（以下）；
profile_元素.appendChild（跟随_按钮）；
profile_元素.classList.add（'profile_元素'）；
单击按钮。添加EventListener（“单击”，（）=>{
跟随用户（用户点击）
});
document.querySelector（“#用户配置文件”）.appendChild（profile_元素）；
});
document.querySelector（“#用户配置文件”）.innerHTML=`${user_clicked_on.charAt（0）.toUpperCase（）+user_clicked_on.slice（1）}profile`；
}
函数跟踪用户（用户跟踪到用户跟踪）{
//使此函数与views.py中的函数一起工作
获取（`/profile/${user\u to\u follow}`{
方法：'放'，
})
}