在试了很多次了，终于搞定了，上代码吧。（我用的是jQuery的ajax，不是原生的）
js代码：
<script> $(document).ready(function () {
getcomment();
$('.comment-box button').click(function () {
var comment_text = $('.comment-box textarea').val();
$.ajax({
type: 'POST', url: '/bbs/article/{
{
article_list.id }
}
/comment/', data: {
comment: comment_text}
, success:function (callback) {
var data = $.parseJSON(callback);
$('.callback').html(data.result);
if(data.result === 'successfully') {
getcomment();
}
}
}
) }
);
}
);
function getcomment() {
$.ajax({
type: 'GET', url: '/bbs/article/{
{
article_list.id }
}
/get_comment/', success:function (call) {
var datas = $.parseJSON(call);
$('.comment-list').html(datas.answer);
}
}
) }
</script>
在全文加载后调用getcomment（）函数，从数据库中获取评论，自己写的评论提交后再次调用getcomment（）函数，自动刷新
html模板（用到是bootstrap模板）：
<div class="row"> <div class="comment-list" style="margin-left: 10px"> </div> </div> <div class="row"> <article class="col-xs-12"> <h4>请评论：</h4> <div class="comment-box"> <textarea class="form-control" rows="3"></textarea> <span class="callback"></span><button type="submit" class="btn btn-success pull-right" style="max-width: 5px;
">评论</button> </div> </article></div> <hr>
视图函数：
@csrf_exemptdef comment(request,article_id): if request.method == 'POST': comments = request.POST['comment'] if len(comments) < 5: result = u'评论数需大于5' return HttpResponse(json.dumps({
'result': result}
)) else: result = 'successfully' Comment.objects.create(content= comments, article_id=article_id) return HttpResponse(json.dumps({
'result': result}
))
这是提交评论的函数，别忘记添加csrf装饰器
def get_comment(request, article_id): article_list = get_object_or_404(Article, id=article_id) comments = article_list.comment_set.all() html = '' for i in comments: ele = '<div class="row"><article class="col-xs-12"><p class="pull-right"><span class="label label-default">作者:' + 'i.user' + '</span></p><p>' + i.content + '<ul class="list-inline"><li><a href="#" rel="external nofollow" ></a></li></ul></article></div><hr>' html += ele return HttpResponse(json.dumps({
'answer': html}
))
后台获取评论的函数。
最后将textarea的值清空：
function resettext() {
$('.form-control').val('');
}
以上所述是小编给大家介绍的django ajax提交评论并自动刷新功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
