Ajax，Django：状态 200 但抛出错误而不是成功答案

【问题标题】：Ajax, Django: status 200 but throws error instead of successAjax，Django：状态 200 但抛出错误而不是成功
【发布时间】：2021-02-09 00:16:46
【问题描述】：

我正在尝试使用 ajax 发表评论，但它不起作用。当我按下按钮控制台没有打印任何错误（如 404 等）时，没有发布评论。错误返回的对象：

{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …} 中止: ƒ (e) 总是: ƒ () 捕获： ƒ (e) 完成： ƒ () 失败： ƒ () getAllResponseHeaders： ƒ () getResponseHeader：ƒ（e） overrideMimeType：ƒ（e）管道：ƒ（）进度： ƒ () promise: ƒ (e) readyState: 4 responseText: "↵" setRequestHeader: ƒ (e,t) 状态：ƒ () 状态：200 状态代码：ƒ (e) statusText：“OK” 然后： ƒ (t,n,r) 原型：对象

在命令行中我看到：

“POST/HTTP/1.1”200 5572

当我将按钮更改为“提交”时，它会使用正确的 JSON 进行发布和响应，例如：

{"comment": {"id": 16, "author": 1, "content": "test", "post": 12}}

我的代码如下，感谢任何帮助：

views.py

def homepage(request):
    profiles = Follow.objects.filter(follow_by=request.user.profile).values_list('follow_to', flat=True)
    posts = Post.objects.filter(author_id__in=profiles).order_by('-date_of_create')
    if request.method == 'POST':
        form = CommentForm(request.POST)
        if form.is_valid():
            pk = request.POST.get('pk')
            post = Post.objects.get(pk=pk)
            new_comment = Comment.objects.create(
                author = request.user.profile,
                post = post,
                content = form.cleaned_data['content']
            )
            return JsonResponse({'comment': model_to_dict(new_comment)}, status=200)
    form = CommentForm()
    context = {
        'posts': posts,
        'form': form
    }
    return render(request, 'posts/homepage.html', context=context)

模板

<div class="comments" id="{{ post.pk }}" style="display: none">
            {% include 'posts/comments.html' %}
            <form action="" method="post" class="commentForm" data-url="{% url 'post_comments' post.pk %}">
                {% csrf_token %}
                <input type="hidden" name="pk" value="{{ post.pk }}">
                {{ form.as_p }}
                <button type="button" class="commentBtn" id="{{ post.pk }}">Comment</button>
            </form>

addComment.js

$(document).ready(function () {
    $('.commentBtn').click(function () {
        let serializedData = $('.commentForm').serialize();
        let btn = $(this);
        let id = btn.attr('id');
        console.log($(".commentForm").data('url'));
        $.ajax({
            url: $(".commentForm").data('url'),
            data: serializedData,
            type: 'post',
            dataType: 'json',
            success: function (data) {
                console.log(data);
                $(`#${id}.comments`).load('/posts/comments/' + data.post);
                $('textarea').val('');
            },
            error: function(textStatus) {
                console.log(textStatus)
            }
        })
    })
})

编辑：我用了这个问题：Ajax request returns 200 OK, but an error event is fired instead of success ，删除了dataType: 'json'并添加了contentType: 'application/json' 现在我得到了 403 错误。

【问题讨论】：

嗨，你在$("commentForm").data('url')..附近想念.。
嗨，谢谢，但没有帮助。
另外，做一件事$('.commentForm').serialize() 打印这个，看看它给了什么。正如我在你的代码中看到的那样，有多个帖子，每个帖子都会有评论部分..所以这将发送数据从所有具有commentForm 类的表单中。改为将其更改为$(this).closest(".commentForm").serialize()，这样它只会从单击按钮的表单中获取数据。
这就是问题所在。非常感谢。将其发布为答案以获得额外的赏金；）。 PS：发表评论后如何让表单不消失？

标签： django ajax django-views django-templates

【解决方案1】：

当您使用$('.commentForm') 将表单数据发送到后端时，它将获取所有具有commentForm 类的表单并发送所有表单的数据，这就是它无法正常工作的原因。相反，您可以将此$('.commentForm').serialize() 更改为@ 987654324@.

另外，您在 ajax 的成功函数中使用 #${id}.comments，这将覆盖 #${id}.comments 中的任何内容并从 url 加载新内容，即：/posts/comments/..。所以，为了避免这种情况，您可以使用 @987654328 @ 带有一些外部 div，然后更改您的选择器，即：#${id}.comments > .yourouterdivclassname，因此新内容将在 div 中加载，因此不会删除表单。

【讨论】：