“如何使用Ajax”；例如；Django帖子列表上的按钮

我用Django创建了我的第一个站点，我试图在ListingPosts页面上使用Ajax的“like”按钮，但是我必须重新加载页面才能获得+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 %}

---

在views.py中，您应该使用JsonResponse将数据发送回jquery

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>

$（'.like'）。单击（函数（）{
var-ps_-id；
ps_id=$（this）.attr（“数据发布id”）；
$.ajax({
url:“/likes_post/”，
方法：“GET”，
数据：{
“post_id”：ps_id，
},
成功：功能（数据）{
$（this.prev（）.find（'.like_count'）.html（数据）；
$（this）.html（数据）；
}
});
});

在jquery的success部分，可以访问使用JsonResponse发送的任何内容。在本例中，我们发送的like是成功部分中的数据

---

在成功部分，您可以在html代码中编写数据

谢谢您的回答@Amir big！当我运行代码时，终端中有一个TypeError:TypeError：为了允许序列化非dict对象，将safe参数设置为False。所以我添加了：return-JsonResponse（like，safe=False），但我还必须重新加载页面才能获得+1 likeoh。。。对不起，我弄错了。我更新了我的答案。检查JsonResponse。看看这是否有效。我不是一个javascript开发人员，但我确信问题出在成功的部分。因为我们可以修改django模型，并从django视图接收数据。我在成功部分写了两个句子，检查哪一个有效。非常感谢您的时间我尝试了这两个句子，但不起作用：(

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})

<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>