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

Question

我一直在开发一个类似的系统，在该系统中，用户可以喜欢一个帖子，而不像该用户已经喜欢它，这与 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>

Answer 1

您可以为此使用 AJAX 请求。您可以阅读有关如何在 django 中使用 AJAX 的文档，例如这是一个非常好的答案：https://stackoverflow.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 脚本。