ホームページ >ウェブフロントエンド >jsチュートリアル >ajax を使用してコメントを送信し、自動的に更新する方法
今回は、ajaxを使用してコメントを送信し、自動的に更新する方法を説明します。 ajaxを使用してコメントを送信し、自動的に更新するための注意事項は何ですか。実際のケースを見てみましょう。
何度も試した結果、ようやく理解できたので、コーディングしてみましょう。 (ネイティブではなく、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テンプレートを使用):
<p> </p><p> </p> <p> <article> <h4>请评论:</h4> <p> <textarea></textarea> <span></span><button>评论</button> </p> </article> </p> <hr>View 関数:
@csrf_exempt def comment(request,article_id): if request.method == 'POST': comments = request.POST['comment'] if len(comments) これはコメントを送信する関数です。csrf デコレーターを追加することを忘れないでください <p style="text-align: left;"></p><pre class="brush:php;toolbar:false">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 = '<p><article><p><span>作者:' + 'i.user' + '</span></p> <p>' + i.content + '</p> <ul><li><a></a></li></ul></article></p><hr>' html += ele return HttpResponse(json.dumps({'answer': html}))バックグラウンドでコメントを取得します。 最後に textarea の値をクリアします:
function resettext() { $('.form-control').val(''); }この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
Ajax + PHP を使用してショッピング カートを作成する詳細なチュートリアル
以上がajax を使用してコメントを送信し、自動的に更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。