在试了很多次了,终于搞定了,上代码吧。(我用的是jQuery的ajax,不是原生的)
js代码:
$(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);
}
})
}
在全文加载后调用getcomment()函数,从数据库中获取评论,自己写的评论提交后再次调用getcomment()函数,自动刷新
html模板(用到是bootstrap模板):
请评论:
视图函数:
@csrf_exempt
def 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 = '
'
html += ele
return HttpResponse(json.dumps({'answer': html}))
后台获取评论的函数。
最后将textarea的值清空:
function resettext() {
$('.form-control').val('');
}
以上所述是小编给大家介绍的django ajax提交评论并自动刷新功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
评论