Django论坛无法实现AJAX无刷新提交评论问题求助

我开发了一个支持用户发布问题的Django论坛应用，想实现用户评论问题时无需刷新页面的效果，但集成AJAX后一直没成功。试过多个教程方案，甚至克隆了相关仓库，问题仍存在，怀疑是设备问题。

相关代码 #

forms.py #

class CommentForm(forms.ModelForm):

    def __init__(self, *args, **kwargs):
        super(CommentForm, self).__init__(*args, **kwargs)
        # add a "form-control" class to each form input
        # for enabling bootstrap
        for name in self.fields.keys():
            self.fields[name].widget.attrs.update({
                'class': 'form-control',
            })

    class Meta:
        model = Comment
        fields = ('question', 'reply_to', 'text')

views.py #

def post_comment(request):
    # request should be ajax and method should be POST.
    if request.is_ajax and request.method == "POST":
        # get the form data
        form = CommentForm(request.POST)
        # save the data and after fetch the object in instance
        if form.is_valid():
            instance = form.save()
            # serialize in new friend object in json
            ser_instance = serializers.serialize('json', [instance, ])
            # send to client side.
            return JsonResponse({"instance": ser_instance}, status=200)
        else:
            # some form errors occured.
            return JsonResponse({"error": form.errors}, status=400)

    # some error occured
    return JsonResponse({"error": ""}, status=400)

urls.py #

urlpatterns = [
    path('comment/', post_comment, name='post-comment'),

]

base.html #

{% block content %}
{% endblock content %}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
{% block javascript %}
{% endblock javascript %}

index.html #

<div class="container-fluid">
    <form id="comment-form">
        <div class="row">
            {% csrf_token %}
            {% for field in form %}
            <div class="form-group col-4">
                <label class="col-12">{{ field.label }}</label>
                {{ field }}
            </div>
            {% endfor %}
            <input type="submit" class="btn btn-primary" value="Create comment" />
        </div>
    </form>
</div>
<hr />

{% endblock %}

{% block javascript %}
<script>
    $("#comment-form").submit(function (e) {
        e.preventDefault();
        var serializedData = $(this).serialize();
        $.ajax({
            type: 'POST',
            url: "{% url 'post-comment' %}",
            data: serializedData,
            success: function (response) {
                // on successfull creating object
                // 1. clear the form.
                $("#comment-form").trigger('reset');

            },
            error: function (response) {
                // alert the error if any error occured
                alert(response["responseJSON"]["error"]);
            }
        })
    })
</script>
{% endblock javascript %}

核心排查点 #

• request.is_ajax 调用错误：Django中request.is_ajax是方法，必须加括号request.is_ajax()，你的代码里没加括号，导致这个条件永远为False，直接返回400错误，这是最可能的原因。
• 表单字段合理性问题：question和reply_to是关联字段，不应该让用户手动输入，应该设为隐藏字段，或者在视图中通过上下文/URL参数自动赋值。比如在视图中拿到当前question对象，然后form.instance.question = question再验证表单，否则用户没填这两个字段会直接验证失败。
• 请求状态与响应查看：打开浏览器开发者工具（F12），在Network标签里查看AJAX请求的状态码（是400、403还是500），以及响应的具体错误信息，这能直接定位问题。
• CSRF令牌验证：确认serializedData中包含csrfmiddlewaretoken字段，可在Network的Form Data里查看，如果没有，检查模板中{% csrf_token %}是否正确渲染。
• 前端渲染逻辑：当前AJAX成功后只重置了表单，没有把新评论添加到页面中，但这不是功能失效的原因，只是看不到结果而已。可以在success回调里解析返回的response.instance，动态创建DOM元素插入到评论列表。

内容的提问来源于stack exchange，提问作者Kurosh