Question

我想使用Ajax创建评论系统。我的主要目的是在页面中获取新评论而无需刷新页面。我在HTML文件中添加了一些js代码，但没有成功。我的错误在哪里，我该怎么办？

views.py

    ...
def post_detail(request, pk, ):
    post = get_object_or_404(Post, pk=pk)
    form = CommentForm(request.POST or None)
    if form.is_valid():
        comment = form.save(commit=False)
        comment.post = post
        comment.save()
        return redirect('post_detail', pk=post.pk)
    context = {
        'post': post,
        'form': form,
    }

    return render(request, 'blog/post_detail.html', context)

comments.html

    {% load crispy_forms_tags %}
{% load static %}
<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>

<script type="text/javascript" src="{% static 'js/jquery-1.11.1.min.js' %}"></script>

<script type="text/javascript">

    $(document).on('submit', '#comment_form', function (e) {
        e.preventDefault();
        $.ajax({

                type: 'POST',
                url: 'http://127.0.0.1:8000/post/12/', 
                data: {
                    name: $('#name').val(),
                    content: $('#content').val(),
                    created_date: $('#created_date').val(),
                    post: $('#post').val(),
                    csrfToken: $('input[name=csrfmiddlewaretoken]').val()
                },
                success: function () {
                    alert("YEAH! It works!");

                }
           }
        )
    })
</script>

post_detail.html

...

    {% 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 %}

urls.py

...
        url(r'^post/(?P<pk>\d+)/$', views.post_detail, name='post_detail'),

当我单击评论按钮时，没有任何动作。但是当我查看元素时，单击按钮会显示状态代码：403

注意：我得到“是的！有效！”警报

Answer 1

success函数接受一个参数，它是服务器发送回的数据。

像这样更新您的代码：

success: function (result) {
    alert("YEAH! It works!");
}

Answer 2

您需要在post_detail方法中返回JsonResponse或部分模板，以便可以在ajax成功函数中使用这些数据。我已经创建了一个用于评论系统的django应用程序，该应用程序使用ajax响应来防止页面刷新。如果您有兴趣Here the package repo

Django Ajax评论系统

2 个答案: