时间戳

首页 > 解决方案 > 从重新加载控制台停止获取功能

javascript - 从重新加载控制台停止获取功能

问题描述

我正在尝试创建一个喜欢/不喜欢的按钮。我正在使用 fetch 将表单发送到我在 python 中的 /like url。为了测试代码，我决定简单地返回一个JSONResponse。它正在工作，但似乎正在重新加载页面，因此正在返回原始状态。即：原始状态为“不喜欢”，点击使其“喜欢”一小段时间，然后“不喜欢”又回来了

这是我的html

 {% if request.user not in post.like.all %}
            <a href="" class="card-link liked" data-id="{{post.id}}" data-is_liked="false" id="post-like-{{post.id}}">

                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart" fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z" />
                </svg>

            </a>
            {% else %}
            <a href="" class="card-link liked" data-id="{{post.id}}" data-is_liked="true" id="post-like-{{post.id}}">

                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart-fill" fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z" />
                </svg>

            </a>
            {% endif %}

这是我的 js 脚本

//this is the script for like edit and delete

var like = document.querySelectorAll(".liked")
like.forEach(element => {
    handleLike(element);
});


function handleLike(element) {
    element.addEventListener('click', () => {

        post_id = element.getAttribute('data-id');
        is_liked = element.getAttribute('data-is_liked');
        icon = document.getElementById(`post-like-${post_id}`);
        count = document.getElementById(`post-count-${post_id}`);
        console.log(post_id, is_liked);
        form = new FormData();
        form.append("post_id", post_id);
        form.append("is_liked", is_liked);
        fetch('/like', {
            method: 'POST',
            body: form,

        }).then((res) => res.json())
            .then((res) => {
                if (res.status == 201)
                    if (res.is_liked === 'true') {
                        {


                            icon.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi - heart - fill" fill="currentColor"
                                    xmlns = "http://www.w3.org/2000/svg" >
                                    <path fill-rule="evenodd"
                                    d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z" />
                                    </svg > `; icon.setAttribute('data-is_liked', 'true')
                        }
                    }
            });

    });

}

这是我的蟒蛇视图

def like(request):
    if request.method == 'POST':
        post_id = request.POST.get('post_id')
        is_liked = request.POST.get('is_liked')
        return JsonResponse({'is_liked': 'true', 'status': 201}, status=201)

我是JS的新手，所以请帮忙。

标签： javascripthtmldjangofetch

解决方案

页面重新加载是因为您单击了<a href=""指向同一页面的 。这是浏览器的默认行为。你应该添加href="javascript:void(0)"

对于持久性，注释指定 like 是与用户的 m2m 关系。视图应如下所示：

post_id = request.POST.get('post_id')
post = Post.objects.get(id=post_id)
is_liked = request.POST.get('is_liked')
if is_liked:
    post.like.add(request.user)
else:
    post.like.remove(request.user)

我建议重命名like为likes

推荐阅读