Как использовать Ajax кнопку «Мне нравится» в списке Django сообщений

Question

Я создал свой первый сайт с Django, и я пытаюсь заставить кнопку Ajax «лайк» работать на странице списка сообщений, но мне нужно перезагрузить страницу, чтобы получить + 1.

Мои просмотры:

def likes_post(request):
    post_id = None

    if request.method == 'GET':
        post_id = request.GET['post_id']

    like = 0

    if post_id:
        post = Post.objects.get(id = int(post_id))
        if post:
            like = post.likes + 1
            post.likes = like
            post.save()
        return HttpResponse(like)

Мой HTML шаблон:

{% for post in posts %}
 <div class="post-favourite">

<a href="#" data-posts-id="{{post.id}}" class="like text-danger">J'aime <i class="fa fa-heart-o likes_count"aria-hidden="true"> {{ post.likes }}</i></a>

</div>

{% endfor %}

и функция Ajax:

<script type="text/javascript">
$('.like').click(function(){
    var ps_id;
    ps_id = $(this).attr("data-posts-id");
    $.get('/likes_post/', {post_id: ps_id}, function(data){
        $(this).prev().find('.like_count').html(data);
    });
});
</script>

Кнопка Ajax для страницы сведений post работает просто замена последней строки на

$('.like_count').html(data); 

Answer 1

в ваших views.py , вы должны отправить данные обратно на jquery с JsonResponse

from django.http import JsonResponse

def likes_post(request):
   post_id = None
   if request.method == 'GET':
        post_id = request.GET['post_id']

    like = 0

    if post_id:
        post = Post.objects.get(id = int(post_id))
        if post:
            like = post.likes + 1
            post.likes = like
            post.save()
        return JsonResponse({'like':like})

а потом в вашем jquery:

<script type="text/javascript">
$('.like').click(function(){
    var ps_id;
    ps_id = $(this).attr("data-posts-id");

$.ajax({
        url: '/likes_post/',
        method: 'GET',
        data: {
            'post_id': ps_id,
        },
        success: function(data){
            $(this).prev().find('.like_count').html(data);
            $(this).html(data);
        }

    });
});
</script>

все, что вы отправляете с помощью JsonResponse , доступно в success часть jquery. в этом примере как , которое мы посылаем, является data in success part. в успешной части вы можете записать данные в html код