I am doing a project which has a like or un-like button for each post on web-page. But when I click on like, I get a page that looks like this (http://127.0.0.1:8000/give_like/2): {"post_to_like": 2}

view.py

def give_like(request, post_to_like):

    like = Likes(user=request.user, post = Post.objects.get(id=post_to_like))
        
    checker = [like.post_id for like in Likes.objects.filter(user = request.user)]

    if post_to_like in checker:
        Likes.objects.filter(post_id=post_to_like, user = request.user).delete()
    else:
        like.save()
    
    return JsonResponse({'post_to_like':post_to_like})

how to load the whole page correctly as html but without reloading the whole page and get info that Im already follow this post so i should see button un-like and the rest of the page?

js.js

var like = document.getElementById("like");

likeDislike(like, function() {
    fetch(`/give_like/${like.dataset.post_to_like}`)
    .then(response => response.json())
    .then(data => {
    like.querySelector('small').innerHTML = data.total_likes;
          });
    }
);

index.html
    <small><p id="total_likes" >  {{post.current_like}}    </p></small>

urls.py

    path("give_like/<int:post_to_like>", views.give_like, name="give_like"),