Django의 like button을 ajax에 연결하는 방법과 버튼이 좋아요 수 +1을 누르고 다시 누르면 좋아요 수 -1
이것은 비디오 모델의 내 모델입니다.
class Video(models.Model):
author = models.ForeignKey(Account, on_delete=models.CASCADE)
video = models.FileField(upload_to='post-videos', validators=[validate_file_extension])
title = models.CharField(max_length=100)
description = models.TextField(null=True, blank=True)
created_date = models.DateTimeField(auto_now_add=True)
likes = models.ManyToManyField(Account, blank=True, related_name='likes', default=None)
내 견해
class AddLike(LoginRequiredMixin, View):
def post(self, request, pk, *args, **kwargs):
video = Video.objects.get(pk=pk)
is_dislike = False
for dislike in video.dislikes.all():
if dislike == request.user:
is_dislike = True
break
if is_dislike:
video.dislikes.remove(request.user)
is_like = False
for like in video.likes.all():
if like == request.user:
is_like = True
break
if not is_like:
video.likes.add(request.user)
if is_like:
video.likes.remove(request.user)
next = request.POST.get('next', '/')
return HttpResponseRedirect(next)
내 템플릿 html
<form method="POST" action="{% url 'video:like' video.pk %}" id="my-like-form">
{% csrf_token %}
<input type="hidden" class="likin" name="next" value="{{ request.path }}">
<button class="remove-default-btn" type="submit" id="openPopup" class="remove-default-btn like-btn{{ request.path }}" style="border: none; ">
<i class="fa fa-thumbs-up" aria-hidden="true"><span class="">{{ video.likes.all.count }}</span></i>
</button>
</form>
당신은 사용할 수 있습니다 JsonResponse( 장고 문서를 )하고 생성 simple view( 장고 문서를 ).
나는 그것이 모델 과 관련된 필드 라고 가정하고 likes있습니다 .many2manyUser
그런 다음 다음 코드를 사용할 수 있습니다.
views.py :
from django.http import JsonResponse
def add_remove_like(request, pk):
data = {}
video = Video.objects.get(pk=pk)
if request.method == "POST":
user = request.user
if video.likes.filter(id=user.id).exists():
liked = False
video.likes.remove(user)
else:
video.likes.add(user)
liked = True
data["count"] = video.likes.count()
data["liked"] = liked
return JsonResponse(data)
.html :
$("#my-like-form").submit(function(e){
e.preventDefault();
var form = $(this);
let url = form.attr("action");
$.ajax({
type: "POST",
url: url,
data: form.serialize(),
dataType: "json",
success: function(response) {
var btn = form.find("button[type='submit']");
if (response.liked) {
console.log('Hello');
btn.css("color", "blue");
} else {
btn.css("color", "black");
}
btn.find("span").text(response.count)
}
})
})
urls.py :
from django.contrib.auth.decorators import login_required
path('account/video/<int:pk>/like', login_required(views.add_remove_like), name='add_remove_like'),
참고 :보기 이름을 다음으로 변경했습니다. add_remove_like
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다