为什么我的 javascript 方法无法从 django 视图函数中获取 API？答案

【问题标题】：Why my javascript method cannot get the API from django views function?为什么我的 javascript 方法无法从 django 视图函数中获取 API？
【发布时间】：2022-01-16 11:32:40
【问题描述】：

我对 javascript 很陌生，我正在做一个有类似按钮的项目。此点赞按钮会增加特定帖子的点赞次数，并在帖子被点赞时将其颜色从蓝色变为红色。

views.py

@login_required
def likepost(request,id):
    post = NewPost.objects.get(id = id)
    is_like = False
    for like in post.likepost.all():
        if like == request.user and request.method == "POST":
            is_like = True
            break
    
    if not is_like:
        post.likepost.add(request.user)
    
    else:
        post.likepost.remove(request.user)
    
    return JsonResponse({
        "is_like" : is_like,
    })

我希望这个功能在用户点击赞按钮时起作用。

模板.html

<form action="{% url 'like' id=posts.id %}" method="POST" style="display: inline;" onsubmit="like_function()">
        {% csrf_token %}
        <button id = "like" class="btn btn-link" type="submit"><i class="fa fa-heart"></i> {{posts.id}}</button>
    </form>
    <!-- <form action="{% url 'like' id=posts.id %}" method="POST" style="display: inline;" onsubmit="return false">
        {% csrf_token %}
        <button onclick="like_function(posts)" id = "like" class="btn btn-link" type="submit"><i class="fa fa-heart"></i> {{posts.id}}</button>
    </form> -->
    <small>{{ posts.likepost.all.count }}</small>

这是我的点赞按钮和点赞数。

controller.js

document.addEventListener("DOMContentLoaded",function(){
    document.querySelector('#like').onsubmit = like_function();
})


function like_function(){
    fetch(`//${like.id}/like`)
    .then(response => response.json())
    .then(response => {
        if(document.querySelector('#like').style.color == "blue"){
            document.querySelector('#like').style.color = "red";
        }
        else{
            document.querySelector('#like').style.color = "blue"
        }
    })
}

这是我的完整 js 代码。我希望这段代码能从 Django 视图中获取 API。当点赞按钮被点击时，按钮会自动从蓝色变为红色，并且喜欢的数量会增加而无需重新加载页面。我的问题是如果不重新加载我什么都做不了，而且我的按钮也没有变红。它始终保持蓝色。我该如何解决？我还分享了我的模型和 urls.py 文件

models.py

class NewPost(models.Model):
    user = models.ForeignKey(User, on_delete = models.CASCADE)
    post = models.TextField()
    timestamp = models.DateTimeField(auto_now = True)
    likepost = models.ManyToManyField(User, default=None, blank=True , related_name="likepost")

    def __str__(self):
        return f"{self.post}"

urls.py

urlpatterns = [
    path("", views.index, name="index"),
    path("index/<int:id>/like",views.likepost, name="like"),
]

【问题讨论】：

标签： javascript api django-views django-templates

【解决方案1】：

提交会触发页面重新加载/重定向到您的操作。删除按钮的type=submit 并在controller.js 文件而不是onsubmit 中使用onclick。您可以在 controller.js 文件中尝试此操作：

document.addEventListener("DOMContentLoaded",function(){
    document.querySelector('#like').onclick = like_function();
})


function like_function(){
    fetch(`index/${like.id}/like`)
    .then(response => response.json())
    .then(result => {
        if(result.is_like){
            document.querySelector('#like').style.color = "red";
        }
        else{
            document.querySelector('#like').style.color = "blue"
        }
    })
}

【讨论】：