Ajax实现评论异步

提交评论

<!-- 提交评论 -->
            <h3>提交评论</h3>
            <div class="commet-put">
                <!-- <p>请先登录后进行评论</p> -->


                {% if request.user.is_authenticated%}
                <!-- 将post改为json传输数据的形式 -->
                <form id="comment_sent" action="{% url 'article:detail' essay.id %}" method="post">
                    {% csrf_token %}
                    <div>
                        <label> 评论内容</label>
                        <div>
                            <!-- {{ formtext.context }}
                            {{ formtext.context.error }} -->
                            {{ formtext.media }}
                            {{ formtext.as_p }}
                        </div>
                        <span class="text_danger pull-left" id="comment_error"></span>
                        <button type="button" id="btn_comment" class="btn btn-primary pull-right">提交</button>
                    </div>
                </form>
                {% else %}
                请先
                <a href="{% url 'users:login' %}"><button type="button" class="btn btn-primary">登录</button></a>
                后进行评论
                {% endif %}



            </div>

评论列表

<h3>评论列表</h3>
            <div class="comment-list">
                <!-- <p>该文章没有评论，赶紧进行评论吧！</p> -->
                <h4>共有{{ comments.count }}评论</h4>
                <div id="comment_dis">
                    {% for comment in comments %}
                    <hr>
                    <div class="commet_list" id="commet_{{ comment.id }}">
                        <p>
                            <strong style="color: pink">
                                {{ comment.user }}
                            </strong> 于
                            <span style="color: green">
                                {{ comment.created_time|date:"Y-m-d H:i:s" }}
                            </span> 时说：
                        </p>

                        {{ comment.context|safe }}
                        <a href="#"><button type="button" class="btn btn-primary pull-right"> 回复 </button></a>
                        <!-- <a href="#comment_sent"><button type="button" class="btn btn-primary pull-right">  回复  </button></a> -->
                    </div>

                    {% endfor%}
                </div>

                <div class="row">


                </div>



            </div>

javascript代码

// javascript 实现ajax增加评论内容
<script>
    // var comment=document.getElementById("id_context");
    var comment = $("#id_context");
    $("#btn_comment").click(function () {
        $("#comment_error").text("");
        // 如果输入的内容为空,提示输入相关的内容
        if($("#id_context").val() == ""){
            $("#comment_error").text("请输入不能为空");
            return false;
        }

        // 打印textarea的值
        console.log("评论的内容为:", $("#id_context").val());
        console.log("forms发送的值为:",$("#comment_sent").serialize()+'&aid={{ essay.id }}' );

        $.ajax({
            url : "{% url 'article:update_comment' %}",
            type: 'post',
            async: true,
            data: $("#comment_sent").serialize()+'&aid={{ essay.id }}',
            cache: false,
            success: function (data) {
                console.log(data);
                if(data['status'] == 'success'){
                    console.log("发送成功");
                    var comment_html = $('<div class="commet_list" id="commet_'+data['commnet_id']+'"></div>');
                    // comment_html.before('<hr>');
                    var phtml = $("<p></p>");
                    phtml.append($('<strong style="color: pink"></strong>').text(data['username']));
                    phtml.append('于');
                    phtml.append($('<span style="color: green"></span').text(data['comment_time']));
                    phtml.append("时说：");
                    comment_html.append(phtml);
                    comment_html.append(data['text']);
                    comment_html.append($('<a href="#"></a>').append($('<button type="button" class="btn btn-primary pull-right"></button').text("回复")));

                    // console.log("htnls=", htmls);
                    $("#comment_dis").prepend(comment_html);
                    $("#comment_dis").prepend($("<hr>"));

                    // 清空输入框
                    $("#id_context").val("");
                    $("span .cm-link.cm-cm-overlay.cm-matchhighlight").text("");
                    console.log("文本框中的内容为：",  $("#id_context").val() );
                    console.log(data);
                }else{
                    $("comment_error").text(data['message']);
                    console.log("接收失败");
                }  
              },
              error: function(xhr){
                  console.log(xhr);
                  console.log("ajax访问失败!")
              }
        })
    })


</script>

views.py异步响应代码

def update_comment(request):
    refer = request.META.get('HTTP_REFERER', reverse('article:home'))
    form = CommentForms(request.POST)
    data = {}

    if form.is_valid():
        aid = request.POST.get('aid');
        print("aid=", aid)
        comment = Comment()
        # comment = Us
        comment.user = request.user
        comment.article = Article.objects.get(id=aid)
        comment.context = form.cleaned_data['context']
        comment.save()

        # 返回的参数
        data['status'] = 'success'
        data['username'] = request.user.username
        data['comment_time'] = comment.created_time.strftime('%Y-%m-%d %H-%M-%S')
        data['text'] = comment.context
        data['commnet_id'] = comment.id
        print(data)
    else:
        data['status'] = 'Error'
        data['message'] = list(form.errors.values())[0][0]

        # 以Json的形式返回数据
    return JsonResponse(data)

urls.py

 path('update/', views.update_comment, name="update_comment"),

更多的内容请见刘龙韬的博客