无法在 Django 中使用 AJAX 获取评论 ID

Question

几天来我一直在与这个问题作斗争，但找不到适合我的案例的解决方案。我正在尝试在不刷新页面的情况下创建喜欢系统。在同步模式下，喜欢和不喜欢的系统工作正常，但是当我尝试添加 AJAX 时，我得到 405，并且只有最后一条评论可以单击一次，我理解 Ajax 的问题不理解 django urls with id or pk like my variant {% url 'store:like' comment.pk %} ，但如何解决？

模板中有这部分：

{% for comment in comments %}
       <h6 class="card-header">
       {{ comment.author }}<small> добавлен {{ comment.created_at|date:'M d, Y H:i' }} </small>
       </h6>
        <div class="card-body">
        <h4>{{ comment }}</h4>
        <form id="like-{{comment.pk}}" method="POST" action="{% url 'store:add_like' comment.pk %}">
                    {% csrf_token %}

                    <button style="background-color: transparent; border: none; box-shadow: none;" type="submit">
                        <a class="btn btn-success" id="like-count-{{comment.pk}}"> Likes {{ comment.likes.all.count }}</a>
                    </button>
                </form>
        

        </div>
        {% empty %}
        <p>Для данного товара  ещё нет комментариев.</p>

        {% endfor %}

我的 ajax 在同一模板中调用：

<script type="text/javascript">
    $(document).ready(function(){

        

  $('[id^="like-"]').submit(function(e){

            e.preventDefault();
            var endpoint = $(this).attr('action');
            var serializedData = $(this).serializeArray();
      $.ajax({
               type: 'POST',
               url: endpoint,
               data: serializedData,
               success: function(response) {
                     $( "#like-count-"+response["id"].toString()).text("Likes "+response["like_count"]);

                },
                error: function(rs, e) {
                       alert(rs.responseText);
                }
          });
    })

这部分来自 urls:

path('products/<int:pk>/like/', addlike, name='like'),

观看喜欢：

@api_view(['POST'])
def addlike(request, pk, *args, **kwargs):

        is_ajax = request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest'
        if request.method == 'POST' and is_ajax:
            
            post = Comment.objects.get(pk=pk)


            is_dislike = False

            for dislike in post.dislikes.all():
                if dislike == request.user:
                    is_dislike = True
                    break

            if is_dislike:
                post.dislikes.remove(request.user)

            is_like = False

            for like in post.likes.all():
                if like == request.user:
                    is_like = True
                    break

            if not is_like:
                post.likes.add(request.user)

            if is_like:
                post.likes.remove(request.user)

            all_post_likes = post.total_likes() (function from models)
            return JsonResponse({"success": True, "like_count": all_post_likes, "id": pk}, status=200)
        else:

            return JsonResponse({"success": False}, status=400)

如何强制AJAX调用我需要的pk？（终于找到解决方法，更新了最终版本的代码）

Answer 1

我认为你应该发送 csrf_token 和 ajax 请求添加 headers: { "X-CSRFToken": token } 到您的 ajax 请求，“令牌是 csrf_token” 或将 @csrf_exempt 装饰器添加到您的函数，但这将使您的视图不安全以防止 CSRF 攻击。

您可以在此处找到更多信息https://docs.djangoproject.com/en/4.0/ref/csrf/

Answer 2

移除‍data-url‍并设置action属性，因为当你点击提交按钮时，默认情况下这个POST请求将被发送到当前URL并且您将收到 405 状态代码，但是如果您设置 action 此 POST 请求将发送到 like url:

<form id="like" method="POST" action="{% url 'store:like' comment.pk %}">
    {% csrf_token %}
     <input type="hidden" value="{{comment.pk}}" name="id">
     <input type="hidden" name="next" value="{{ request.path }}">
     <button style="background-color: transparent; border: none; box-shadow: none;" type="submit">
     <a class="btn btn-success" id="like"> Likes {{ comment.likes.all.count }}</a>
     </button>
</form>

而在 js 中你可以像这样得到 URL

var endpoint = $(this).attr('action');

更新

所有表单都有相同的“ID”，因此只有第一个被执行，其余表单不受 Ajax 管理，要解决此问题，您可以提供不同的 ID到表格（此条件也适用于 a 标签）：

<form id="like-{{comment.pk}}" method="POST" action="{% url 'store:like' comment.pk %}">
     {% csrf_token %}
     ........
     .....
     <a class="btn btn-success" id="likes-count-{{comment.pk}}"> Likes {{ comment.likes.all.count }}</a>

并且可以通过这种方式接收事件并更新点赞数。

$(document).ready(function(){
  $('[id^="like-"]').submit(function(e){
    e.preventDefault();
    var endpoint = $(this).attr('action');
    var serializedData = $(this).serializeArray();
     
    $.ajax({
       url: endpoint,
       method: "POST",
       data: serializedData,
       success: function(response){
         $("#likes-count-" + serializedData[1].value).text("Likes "+response["like_count"]);
       }
    });
  })
});

在视图中你应该 return 新的点赞数：

return JsonResponse({"success": True, "like_count": new_like_count}, status=200)

并且在成功函数中，您可以通过 response 访问新号码，现在我们更改 a 标签的文本值以更改喜欢的计数。

^= means: selects elements that have the specified attribute with a value beginning exactly with a given string. attributeStartsWith1

无法在 Django 中使用 AJAX 获取评论 ID

Can not get comment id with AJAX in django

django

ajax

django-forms

django-templates

django-ajax-selects

更新