Python Django用Ajax创建评论系统

我想为我的页面创建一个评论系统。系统应该可以在不刷新页面的情况下工作。我对Ajax非常陌生，我可能遗漏了一些东西，但我不知道是什么。当我点击“评论”按钮时，页面显示如下内容：

我的代码：

view.py

def post_detail(request, pk, ):
    post = get_object_or_404(Post, pk=pk)
    form = CommentForm(request.POST or None)
    if form.is_valid():
        name = request.POST['name']
        content = request.POST['content']
        comment = Comment()
        comment.name = name
        comment.content= content
        return JsonResponse(model_to_dict(comment), safe=False)
    context = {
        'post': post,
        'form': form,
    }
    return render(request, 'blog/post_detail.html', context)

class Comment(models.Model):
    name = models.CharField(max_length=200, verbose_name='name')
    content = models.TextField(verbose_name='comment')
    created_date = models.DateTimeField(auto_now_add=True)

型号.py

def post_detail(request, pk, ):
    post = get_object_or_404(Post, pk=pk)
    form = CommentForm(request.POST or None)
    if form.is_valid():
        name = request.POST['name']
        content = request.POST['content']
        comment = Comment()
        comment.name = name
        comment.content= content
        return JsonResponse(model_to_dict(comment), safe=False)
    context = {
        'post': post,
        'form': form,
    }
    return render(request, 'blog/post_detail.html', context)

class Comment(models.Model):
    name = models.CharField(max_length=200, verbose_name='name')
    content = models.TextField(verbose_name='comment')
    created_date = models.DateTimeField(auto_now_add=True)

comment.html

    {% load crispy_forms_tags %}

<hr>
<form method="POST" style="width: 50%; margin-left: 20px" id="comment_form">
    {% csrf_token %}
    {{ form|crispy }}
    <input type="submit" class="btn btn-info" value="Yorum Ekle" style="margin-left: 20px">
</form>

...     
    <div id="comment">
    <h2>Yorum Ekle:</h2>
    {% include 'blog/comment.html' %}
    <hr>
    {% for comment in post.comments.all %}
        <h4>{{ comment.name }} |
            <small>{{ comment.created_date|timesince }} önce</small>
        </h4>
        <p>{{ comment.content|linebreaks }}</p>
    {% endfor %}
</div>
<hr>
<hr>
<script type="text/javascript" src="{% static 'js/jquery-1.11.1.min.js' %}"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $("#comment|form").submit(function (e) {
            e.preventDefault();
            var url = "/post/12";
            $.ajax({
                type: 'POST',
                url: url,
                data: $("#comment_form").serializeArray(),
                success: function (data) {
                    console.log('SUCCESS');

                }
            });
        });
    });
</script>

---

我的错误是什么？我该如何纠正？请帮帮我。感谢您的关注。

您的选择器语法有问题：

$(document).ready(function () {
    $("#comment|form").submit(function (e) {
        ...

---

$（“#comment | form”）

应该改为post#u detail.html文件中的

$（“#comment | form”）

。

您还没有告诉我们实际的错误，那么我们如何诊断问题？你期望得到什么样的结果？你得到了什么样的错误？@Jode我发布了一个答案，但如果这不是你唯一的问题，我们需要更多关于你问题的信息。