django ajaxコメントを提出し、自動更新機能の実現コード
何度も試しましたが、やっとできました。コードをかけましょう。私はjQueryのajaxを使っています。元のものではありません。
jsコード:
htmlテンプレート(bootstrapテンプレートで使用):
最後にtextareaの値をクリアします。
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_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 = '<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にコメントを提出して、自动的に机能の実现コードを更新します。皆さんに助けてほしいです。ここでも私たちのサイトを応援してくれてありがとうございます。