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

Я создал свой первый сайт с 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); 

Всего 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 , доступно в успешной части jquery. в этом примере то, что мы отправляем, является частью данных в успехе .

в успешной части вы можете записать данные в свой HTML-код