为什么我的like函数对我的django代码不起作用?

dfddblmv  于 2023-06-25  发布在  Go
关注(0)|答案(1)|浏览(85)

我目前正在做CS50第4周的网络问题,我一直有我的“喜欢”和“不喜欢”按钮的问题。它拒绝改变,即使我点击和刷新它多次。我已经做了好几天了,似乎还不知道出了什么问题。
这是我的代码。

类似处理函数:

function likeHandler(id, whoYouLiked){
if(whoYouLiked.index0f(id) >= 0){
    var liked = true;
} else {
    var liked = false;
      }

if(liked === true){
          fetch(`/remove_like/${id}`)
          .then(response => response.json)
          .then(result => {
          console.log(result)
        })
} else{`your text`
          fetch(`/add_like/${id}`)
          .then(response => response.json)
          .then( result => {
          console.log(result)
        })
      }
}

索引点赞Btn:

{% if post.id in whoYouLiked %}
        <button class = "btn btn-info fa fa-thumbs-down col-1" onclick="likeHandler({{ post.id }}), {{ whoYouLiked }}" id="{{ post.id }}" ></button>
{% else %}
        button class = "btn btn-info fa fa-thumbs-up col-1" onclick="likeHandler({{ post.id }}), {{ whoYouLiked }}" id="{{ post.id }}" ></button>
{% endif %}

我的视图和URL中的Like函数:

def remove_like(request, post_id):
    post = Post.objects.get(pk=post_id)
    user = User.objects.get(pk=request.user.id)
    like = Like.objects.filter(user=user, post=post)
    like.delete()
    return JsonResponse({"message": "Like removed!"})

def add_like(request, post_id):
    post = Post.objects.get(pk=post_id)
    user = User.objects.get(pk=request.user.id)
    newLike = Like(user=user, post=post)
    newLike.save()  
    return JsonResponse({"message": "Like added!"})
  • 请让我知道,如果你需要看到我的代码!*
6gpjuf90

6gpjuf901#

根据您提供的代码,看起来可能有几个问题,可能导致您的喜欢和不喜欢按钮没有正确更新。

  1. HTML中的错误函数调用:在类似和不类似按钮的HTML代码中,您将向likeHandler函数传递两个参数:post.id和whoYouLiked变量。但是,whoYouLiked变量没有被正确传递,并且不清楚该变量表示什么或如何定义它。您可能想尝试从函数调用中删除whoYouLiked参数,看看这是否解决了问题。
    1.喜欢的变量处理不正确:在likeHandler函数中,您使用liked变量来确定是否添加或删除likes。但是,未正确设置liked的值。具体来说,您使用index0f方法检查id变量是否在whoYouLiked列表中,但此方法应该是indexOf(大写“O”)。此外,您可能需要考虑使用includes方法而不是indexOf,这是检查数组是否包含特定值的更简洁的方法。下面是likeHandler函数的更新版本,应该可以工作:
function likeHandler(id) {
  fetch(  /add_like/${id}  )
    .then(response => response.json())
    .then(result => {
      console.log(result);
      // Update the button text and class to reflect the new like status
      const button = document.getElementById(id);
      button.textContent = 'Unlike';
      button.classList.remove('fa-thumbs-up');
      button.classList.add('fa-thumbs-down');
    })
    .catch(error => {
      console.error(error);
    });
}

function unlikeHandler(id) {
  fetch(  /remove_like/${id}  )
    .then(response => response.json())
    .then(result => {
      console.log(result);
      // Update the button text and class to reflect the new like status
      const button = document.getElementById(id);
      button.textContent = 'Like';
      button.classList.remove('fa-thumbs-down');
      button.classList.add('fa-thumbs-up');
    })
    .catch(error => {
      console.error(error);
    });
}

这段代码定义了不同的函数,用于喜欢和不喜欢帖子,并根据获取请求的结果更新按钮文本和类。
1.获取响应的处理不正确:在add_like和remove_like视图中,返回一个带有“message”键的JSON响应。但是,在您的likeHandler函数中,您没有检查响应的内容,因此可能没有正确更新按钮文本和类。您可能需要添加一些代码来检查响应的内容并处理可能发生的任何错误。
例如,您可以修改likeHandler函数,使其看起来像这样:

function likeHandler(id) {
     fetch(  /add_like/${id}  )
       .then(response => response.json())
       .then(result => {
         if (result.message === 'Like added!') {
           console.log(result);
           // Update the button text and class to reflect the new like status
           const button = document.getElementById(id);
           button.textContent = 'Unlike';
           button.classList.remove('fa-thumbs-up');
           button.classList.add('fa-thumbs-down');
         } else {
           console.error(result.message);
         }
       })
       .catch(error => {
         console.error(error);
       });
   }
   
   function unlikeHandler(id) {
     fetch(  /remove_like/${id}  )
       .then(response => response.json())
       .then(result => {
         if (result.message === 'Like removed!') {
           console.log(result);
           // Update the button text and class to reflect the new like status
           const button = document.getElementById(id);
           button.textContent = 'Like';
           button.classList.remove('fa-thumbs-down');
           button.classList.add('fa-thumbs-up');
         } else {
           console.error(result.message);
         }
       })
       .catch(error => {
         console.error(error);
       });
   }

这段代码检查响应的内容,如果“message”键与预期值不匹配,则记录一条错误消息。

相关问题