喜欢/不喜欢帖子而不刷新页面

Posted 2023-05-08

【中文标题】喜欢/不喜欢帖子而不刷新页面

【英文标题】：like/unlike a post without refreshing the page

【发布时间】：2020-11-14 19:14:32

【问题描述】：

我一直在开发一个类似的系统，在该系统中，用户可以喜欢一个帖子，而不像该用户已经喜欢它，这与 instagram 非常相似。因此，在完成该系统后，我意识到每次按下按钮时页面都会重新加载，我不希望这种情况发生，经过一番调查后，我得出结论认为这可以使用 json 或 jquery 来完成，但问题是我还没有真正做到使用它是因为我现在只专注于学习 django。按下按钮时如何使页面不刷新的代码？

models.py

class Post(models.Model):
    text = models.CharField(max_length=200)
    video = models.FileField(upload_to='clips', null=True, blank=True)
    user = models.ForeignKey(User, related_name='imageuser', on_delete=models.CASCADE, default='username')
    liked = models.ManyToManyField(User, default=None, blank=True, related_name='liked')
    updated = models.DateTimeField(auto_now=True)
    created =models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return str(self.text)

    def get_absolute_url(self):
        return reverse('comments', args=[self.pk])

LIKE_CHOICES = (
    ('Like', 'Like'),
    ('Unlike', 'Unlike'),
)

class Like(models.Model):
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    post = models.ForeignKey(Post, on_delete=models.CASCADE)
    value = models.CharField(choices=LIKE_CHOICES, default='Like', max_length=10)

    def __str__(self):
        return str(self.post)

views.py

def like_post(request):
    user = request.user
    if request.method == 'POST':
        post_id = request.POST.get('post_id')
        post_obj = Post.objects.get(id=post_id)

        if user in post_obj.liked.all():
            post_obj.liked.remove(user)
        else:
            post_obj.liked.add(user)

        like, created = Like.objects.get_or_create(author=user, post_id=post_id)

        if not created:
            if like.value == 'Like':
                like.value == 'Unlike'
            else:
                like.value = 'Like'
        
        like.save()
    return redirect('home')

def home(request):
    contents = Post.objects.all()

    context = 
        "contents": contents,
    
    print("nice2")
    return render(request, 'home.html', context)

home.html

<form action="% url 'like-post' %" method="POST">
  % csrf_token %
  <input type='hidden' name="post_id" value=" content.id ">
  % if user not in content.liked.all %
    <button type="submit">Like</button>
  % else %
    <button type="submit">Unlike</button>
  % endif %
</form>
<strong> content.liked.all.count </strong>

【参考方案1】：

您可以为此使用 AJAX 请求。您可以阅读有关如何在 django 中使用 AJAX 的文档，例如这是一个非常好的答案：https://***.com/a/20307569/13290801

仅仅因为你专注于学习django并不意味着你可以忽略其他语言，因为你需要使用什么取决于你想要达到什么。

基本的 jquery 设置是这样的：

$(document).ready(function()
$(".like").click(function() 
  var contentpk = $(this).data('contentpk');
    $.ajax(
        url: "//", //your like_post url should go here, you can use the variable created above (contentpk) if that is in your url
        success: function(result) 
        );
      );
    );

您的 html 需要稍作修改：

% if user not in content.liked.all %
  <a class="btn like" href="javascript:" data-content="content.pk">Like</a>
% else %
  <a class="btn like" href="javascript:" data-content="content.pk">Unlike</a>
% endif %

这也是假设您的 html 中已经有 jquery cdn 脚本。

【讨论】：

谢谢！明天早上我会试试，我会告诉你发生了什么，我会尝试学习更多的语言，就像你建议的那样，从 jquery 和 JavaScript 开始，这看起来很有趣

嗨，梅尔！我刚刚尝试了你的代码，没有弹出错误，但是点赞按钮没有完成任何工作，它不喜欢帖子，因为它没有计算点赞或将文本更改为不同

我还使用% url 'like_post' % 作为 ajax 的 url 部分。我认为错误出现在 html 的 href 或 url 中，但我不知道如何解决。

也许错误可能出在数据内容上，因为我之前没有在后端使用 pk