显示根评论
1.render方法:
article_detail.html
{% extends 'base.html' %}
{% block page_main %}
<div class="article-detail">
<h1>{{ article.title }}</h1>
<p>{{ article.articledetail.content|safe }}</p>
</div>
{# 点赞和踩灭 区域#}
<div class="poll clearfix">
<div id="div_digg">
<div class="diggit action">
<span class="diggnum" id="digg_count">{{ article.up_count }}</span>
</div>
<div class="buryit action">
<span class="burynum" id="bury_count">{{ article.down_count }}</span>
</div>
<div class="clear" style="clear: both"></div>
<div class="diggword" id="digg_tips" style="color: red;"></div>
</div>
</div>
{# 评论 区域#}
{# 不管有没有登录都可以看到所有评论#}
<p>评论列表</p>
<ul class="comment_list list-group">
{% for comment in comment_list %}
<li class="list-group-item">
<div>
<a href="">#{{ forloop.counter }}楼</a>
<span style="color: gray;">{{ comment.create_time|date:"Y-m-d H-i" }}</span>
<a href=""><span>{{ comment.user.username }}</span></a>
<a href="" class="pull-right"><span>回复</span></a>
</div>
<div class="con">
{{ comment.content }}
</div>
</li>
{% endfor %}
</ul>
{# 线判断是否登录，要是没登录就不用显示评论了#}
{% if request.user.username %}
<div class="div_comment">
<p>昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50" value="{{ request.user.username }}"></p>
<p>评论内容</p>
<textarea name="" id="comment_content" cols="60" rows="10"></textarea>
<p>
<button id="comment_btn">提交评论</button>
</p>
</div>
{% else %}
<a href="/login/">请先登录</a>
{% endif %}
<script>
//提交评论
$("#comment_btn").on("click",function () {
var article_id=$(".keep_article_id").attr("article_id");
var content = $("#comment_content").val();
var pid = "";
$.ajax({
url:"/blog/comment/",
type:"post",
data:{
article_id:article_id,
content:content,
pid:pid
},
success:function (arg) {
console.log(arg);
//清空文本框
$("#comment_content").val("");
}
})
})
</script>
<div class="keep_article_id" article_id="{{ article.pk }}" username="{{ request.user.username }}"></div>
<script src="/static/js/article_detail.js"></script>
{% endblock %}
使用render方法的话，评论完的就必须要刷新页面才会显示
2.Ajax方法
views.py
def comment(request): print(request.POST) pid = request.POST.get("pid") article_id = request.POST.get("article_id") content = request.POST.get("content") user_pk = request.user.pk response = {} #判断是根评论 还是 子评论 if not pid: #这是根评论 comment_obj = models.Comment.objects.create(article_id=article_id,content=content,user_id=user_pk) response["create_time"] = comment_obj.create_time response["content"] = comment_obj.content response["username"] = comment_obj.user.username return JsonResponse(response)
article_detail.html
{% extends 'base.html' %}
{% block page_main %}
<div class="article-detail">
<h1>{{ article.title }}</h1>
<p>{{ article.articledetail.content|safe }}</p>
</div>
{# 点赞和踩灭 区域#}
<div class="poll clearfix">
<div id="div_digg">
<div class="diggit action">
<span class="diggnum" id="digg_count">{{ article.up_count }}</span>
</div>
<div class="buryit action">
<span class="burynum" id="bury_count">{{ article.down_count }}</span>
</div>
<div class="clear" style="clear: both"></div>
<div class="diggword" id="digg_tips" style="color: red;"></div>
</div>
</div>
{# 评论 区域#}
{# 不管有没有登录都可以看到所有评论#}
<p>评论列表</p>
<ul class="comment_list list-group">
{% for comment in comment_list %}
<li class="list-group-item">
<div>
<a href="">#{{ forloop.counter }}楼</a>
<span style="color: gray;">{{ comment.create_time|date:"Y-m-d H-i" }}</span>
<a href=""><span>{{ comment.user.username }}</span></a>
<a href="" class="pull-right"><span>回复</span></a>
</div>
<div class="con">
{{ comment.content }}
</div>
</li>
{% endfor %}
</ul>
{# 线判断是否登录，要是没登录就不用显示评论了#}
{% if request.user.username %}
<div class="div_comment">
<p>昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50" value="{{ request.user.username }}"></p>
<p>评论内容</p>
<textarea name="" id="comment_content" cols="60" rows="10"></textarea>
<p>
<button id="comment_btn">提交评论</button>
</p>
</div>
{% else %}
<a href="/login/">请先登录</a>
{% endif %}
<script>
//提交评论
$("#comment_btn").on("click",function () {
var article_id=$(".keep_article_id").attr("article_id");
var content = $("#comment_content").val();
var pid = "";
$.ajax({
url:"/blog/comment/",
type:"post",
data:{
article_id:article_id,
content:content,
pid:pid
},
success:function (arg) {
console.log(arg);
var create_time = arg.create_time;
var content = arg.content;
var username = arg.username;
var comment_li = '<li class="list-group-item"> <div> <span style="color: gray;">'+create_time+'</span> <a href=""><span>'+username+'</span></a></div> <div class="con">'+content+'</div> </li>';
$(".comment_list").append(comment_li);
//清空文本框
$("#comment_content").val("");
}
})
})
</script>
<div class="keep_article_id" article_id="{{ article.pk }}" username="{{ request.user.username }}"></div>
{# {% csrf_token %}#}
<script src="/static/js/article_detail.js"></script>
{% endblock %}
这样使用ajax后，新的评论就不是靠刷新页面了，而是通过 document操作实现的
JS小知识
在js里面：
var s = "hellow world";
console.log(s.charAt(6)); 通过索引找字符
console.log(s.indexOf("h")) 通过字符找索引