ajax を使用してコメントを送信し、自動的に更新する方法

今回は、ajaxを使用してコメントを送信し、自動的に更新する方法を説明します。 ajaxを使用してコメントを送信し、自動的に更新するための注意事項は何ですか。実際のケースを見てみましょう。

何度も試した結果、ようやく理解できたので、コーディングしてみましょう。 (ネイティブではなく、jQuery の ajax を使用します)

js コード:

<script>
 $(document).ready(function () {
  getcomment();
  $(&#39;.comment-box button&#39;).click(function () {
   var comment_text = $(&#39;.comment-box textarea&#39;).val();
   $.ajax({
    type: &#39;POST&#39;,
    url: &#39;/bbs/article/{{ article_list.id }}/comment/&#39;,
    data: {comment: comment_text},
    success:function (callback) {
     var data = $.parseJSON(callback);
     $(&#39;.callback&#39;).html(data.result);
     if(data.result === &#39;successfully&#39;) {
      getcomment();
     }
    }
   })
  });
 });
 function getcomment() {
  $.ajax({
   type: &#39;GET&#39;,
   url: &#39;/bbs/article/{{ article_list.id }}/get_comment/&#39;,
   success:function (call) {
    var datas = $.parseJSON(call);
    $(&#39;.comment-list&#39;).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 ページング効果を実装する方法

以上がajax を使用してコメントを送信し、自動的に更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。