【问题标题】:Fetch API PUT method not updating databaseFetch API PUT 方法不更新数据库
【发布时间】:2020-10-28 19:35:07
【问题描述】:

我的网页上有通过 Fetch API 'POST' 方法显示的帖子,我设法为每个帖子创建了一个喜欢/不喜欢的按钮,单击该按钮可以来回切换。当帖子被喜欢或不喜欢时,帖子旁边显示的点赞数会更新,但在刷新页面时,所有值都会重置,因此数据库中不会更新任何内容。此外,当我转到该帖子的 Fetch API 路由时,点赞数没有改变。

这是一个 Django 项目。喜欢/不喜欢按钮正在使用我在 views.py 中创建的 Fetch API 'PUT' 方法,但我显然没有正确创建它。我在控制台中收到“PUT 403(禁止)”错误。

models.py

class Post(models.Model):
    creator = models.ForeignKey("User", on_delete=models.CASCADE, related_name="post_creator")
    content = models.TextField(max_length=250, blank=True)
    created = models.DateTimeField(auto_now_add=True)
    likes = models.IntegerField(blank=True, default=0)

    def serialize(self):
        return {
            "id": self.id,
            "creator": self.creator.username,
            "content": self.content,
            "created": self.created.strftime("%d %b %Y, %H:%M"),
            "likes": self.likes
        }

views.py

def post(request, post_id):

    try:
        post = Post.objects.get(creator=request.user, pk=post_id)
    except Post.DoesNotExist:
        return JsonResponse({"error": "No post found."}, status=404)


    if request.method == "GET":
        return JsonResponse(post.serialize())

    elif request.method == "PUT":
        data = json.loads(request.body)
        post.likes = int(data.get("likes")) + 1
        post.save()
        return HttpResponse(status=204)
    
    else:
        return JsonResponse({
            "error": "GET or PUT request required."
        }, status=400)

index.js

function likePost(post_id) {
    fetch(`/posts/${post_id}`)
    .then(response => response.json())
    .then(post => {

        let like = document.getElementById(`like-count-${post.id}`);
        console.log(like);
        let likeCount = parseInt(like.innerText);
        console.log("Number of likes: " + likeCount);
        like.innerText = `${++likeCount}`;

        fetch(`/posts/${post_id}`, {
            credentials: 'include',
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                "Access-Control-Allow-Origin" : "*", 
                "Access-Control-Allow-Credentials" : true 
            },
            body: JSON.stringify({
                likes: likeCount
            })
        })
        .then(response => response.json())
        .then(post => {
            console.log(`Post ${post.id} likes is now: ${post.likes}`);

        })

    })
}

如果我需要提供更多信息,请告诉我。

【问题讨论】:

  • 当您从您的页面发出请求时,您会得到什么响应代码? (参见 Chrome 开发工具的网络标签)
  • @IvanD 对不起,我实际上忘记包含我收到的错误,但编辑了我的帖子。我在 Fetch PUT 上收到 403 禁止响应,在 Fetch GET 上收到 200 响应。

标签: javascript django django-views fetch-api dom-manipulation


【解决方案1】:

如果它对其他人有帮助,我在 post 函数上方缺少@csrf_exempt。我也确实意识到,由于我只是对资源进行了微小的更改,因此最好使用 PATCH 方法而不是 PUT。

@csrf_exempt
@login_required
def post(request, post_id):

    try:
        post = Post.objects.get(pk=post_id)
    except Post.DoesNotExist:
        return JsonResponse({"error": "No post found."}, status=404)


    if request.method == "GET":
        return JsonResponse(post.serialize())

    elif request.method == "PATCH":
        data = json.loads(request.body)
        post.likes = data["likes"]
        post.save()
        return HttpResponse(status=204)
    
    else:
        return JsonResponse({
            "error": "GET or PATCH request required."
        }, status=400)

【讨论】:

  • 是否有无需重新加载即可更新页面?我知道 vuejs 有,但是没有 JavaScript 框架怎么办?
猜你喜欢
  • 2022-06-25
  • 2020-11-16
  • 2022-07-17
  • 2016-10-12
  • 1970-01-01
  • 1970-01-01
  • 2019-04-25
  • 2023-01-14
  • 1970-01-01
相关资源
最近更新 更多