按下按钮时如何不刷新页面

Question

我一直在我的 django 项目中开发一个喜欢/不喜欢的功能，用户可以喜欢一个帖子，如果喜欢，用户可以不喜欢它，就像在 instagram 中一样。现在要完成项目的这一部分，我需要在按下喜欢或不喜欢按钮时不刷新页面，但问题是我对 ajax 非常陌生。我怎样才能做到这一点？

models.py

class Post(models.Model):
    text = models.CharField(max_length=200)
    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)

urls.py

urlpatterns = [
    path('', views.home, name='home'),
    path('like/', views.like_post, name="like-post"),
]

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

为避免更新页面，您可以将 html 上的按钮设置为：

 <button type='button'>submit</button>

您必须向按钮或与 onclick 关联的函数添加事件侦听器，而不是使用提交，以便您可以调用 ajax 在后台处理此请求。 p>

您还可以通过为您的表单提供一个空操作来实现这一点，方法是：

<form action="javascript:void(0);" method="POST">

看看这个教程： https://simpleisbetterthancomplex.com/tutorial/2016/08/29/how-to-work-with-ajax-request-with-django.html

Answer 2

这与表单标签内带有type=submit 的按钮的默认html 行为有关。默认情况下，如果您单击类型为提交的按钮，它会尝试发送您的数据并重新加载您的页面。您可以只更改按钮的类型，让您的 javascript 代码处理按钮行为。在每个按钮上，添加：

<button id="like-button" type="button">Like</button>

对于 JavaScript 代码，只需添加到您的标签或单独的 js 文件中：

window.addEventListener('DOMContentLoaded', (event) => {
    let likeButton = document.querySelector(#like-button);
    likeButton.addEventListener('click', () => {
          your code when like button is clicked
    }
});