在試了很多次了，終于搞定了，上代碼吧。（我用的是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>
在全文加載后調(diào)用getcomment（）函數(shù)，從數(shù)據(jù)庫(kù)中獲取評(píng)論，自己寫的評(píng)論提交后再次調(diào)用getcomment（）函數(shù)，自動(dòng)刷新
html模板（用到是bootstrap模板）：
div class="row">
div class="comment-list" style="margin-left: 10px">
/div>
/div>
div class="row">
article class="col-xs-12">
h4>請(qǐng)?jiān)u論：/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;">評(píng)論/button>
/div>
/article>
/div>
hr>
視圖函數(shù)：
@csrf_exempt
def comment(request,article_id):
if request.method == 'POST':
comments = request.POST['comment']
if len(comments) 5:
result = u'評(píng)論數(shù)需大于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}))
這是提交評(píng)論的函數(shù)，別忘記添加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}))
后臺(tái)獲取評(píng)論的函數(shù)。
最后將textarea的值清空：
function resettext() {
$('.form-control').val('');
}
以上所述是小編給大家介紹的django ajax提交評(píng)論并自動(dòng)刷新功能的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- Python的Django應(yīng)用程序解決AJAX跨域訪問問題的方法
- 使用Python的Django框架結(jié)合jQuery實(shí)現(xiàn)AJAX購(gòu)物車頁(yè)面
- django使用ajax post數(shù)據(jù)出現(xiàn)403錯(cuò)誤如何解決
- django中使用jquery ajax post數(shù)據(jù)出現(xiàn)403錯(cuò)誤的解決辦法(兩種方法)
- Django框架如何使用ajax的post方法
- django通過ajax發(fā)起請(qǐng)求返回JSON格式數(shù)據(jù)的方法
