Как реализовать функцию Like, подобную Instagram, с помощью Django, используя ajax?

hi Я делаю сайт социальной сети с функцией like, похожей на Instagram, где пользователю не нужно просматривать отдельное сообщение, чтобы поставить лайк, а можно поставить лайк этому сообщению прямо с главной страницы, как я могу это сделать?

мой основной шаблон:

{% load static %}

        {% if user.is_authenticated %}
        {% if obj %}
        <h1 style="background:skyblue;text-align:center;">Posts</h1>
            {% for obj in obj %}
            <div style="background:lightgrey;border-radius:5px;margin-bottom:20px;padding:1rem;">
                   <form method="get">
                       <input  hidden  value="{{obj.id}}" name="liked_post_id">
                   </form>

                <p>{{obj.user}}</p>
                <p>{{obj.name}}</p>
                <img height="250px" width="100%" src="{{  obj.image.url  }}" alt="Image ">
                <p>{{obj.desription}}</p>
<!--                {% include "like_page.html" %}-->
                <button id="btn_1"  name="btn_1" type="submit" value="{{ obj.id }}">like </button>
                <span id="like_count">{{obj.like_count}}</span>

                <h4>add a comment</h4>
                {% include "comments.html" %}
            </div>
            {% endfor %}

        {% else %}
        <h1 style="background:skyblue;text-align:center;">No Posts available</h1>
        {% endif %}
        {% endif %}

мои урлы :

from django.urls import path
from .views import index, show, LikeView, addComment\
    # , likeviewNumber


urlpatterns = [
    path("", index, name="home"),
    path("show", show, name="show"),
    path("like/", LikeView, name="post_like"),
    path("comment/",addComment, name="comment" ),
   # path('like_num',likeviewNumber )
]

аякс, который я использовал: 

 <script src="{% static 'jquery-3.6.0.js' %}" type="text/javascript"></script>
    <script>
        $(document).on('click','#btn_1',function(e){
            e.preventDefault();
          $.ajax({
            type:'POST',
            url:'{% url "post_like" %}',
            data:{
              postid:$('post_id').val(),  // idher mene abhi name=Post_id use kia ha <like_page.html> k ander  /warna yahan par buton ki id use hoti ha #btn_1
              csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
              action:'post'
            },
            success:function(json){
              document.getElementById("like_count").innerHTML=json['result']
              console.log(json)
            },
            error:function(xhr,errmsg,err){
           }
         });
})



 </script>

Теперь моя основная проблема заключается в том, что я показываю все посты в цикле for, и когда нажимается кнопка like, в каждом посте содержится один и тот же id, но содержит индивидуальное уникальное значение post.id. но ajax думает, что я нажимаю на самую первую кнопку, даже если мне нравится последнее сообщение. Мне нужен способ поставить лайк каждому посту с главной страницы, как пользователи ставят лайки в Instagram, без необходимости делать страницу с деталями поста. пожалуйста, помогите .

Вам следует использовать класс для запуска действия AJAX, а затем вы можете указать ID вашего поста в атрибуте data- следующим образом :

<button class="likeBtn" data-post-id="{{ obj.id }}">like</button>
<span id="like_count{{ obj.id }}">{{obj.like_count}}</span>

И в вашем Javascript :

<script>
    $(document).on('click','.likeBtn',function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '{% url "post_like" %}',
            data: {
                postid: $(e.target).data('postId'),
                csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                action:'post'
            },
            success: function(json){
                document.getElementById("like_count" + $(e.target).data('postId')).innerHTML=json['result']
                console.log(json)
            },
            error:function(xhr,errmsg,err){
                console.error(xhr)
            }
         });
})
</script>
Вернуться на верх