So verwenden Sie Ajax, um Kommentare einzureichen und diese automatisch zu aktualisieren

Dieses Mal zeige ich Ihnen, wie Sie mit Ajax Kommentare senden und automatisch aktualisieren. Was sind die Vorsichtsmaßnahmen für die Verwendung von Ajax zum Senden und automatischen Aktualisieren von Kommentaren? Schauen Sie mal rein.

Nachdem ich es viele Male versucht habe, habe ich es endlich geschafft, lass es uns programmieren. (Ich verwende jQuerys Ajax, nicht nativ)

js-Code:

<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>

Rufen Sie die Funktion getcomment() auf, nachdem der vollständige Text geladen wurde, um Kommentare aus der Datenbank abzurufen, die ich danach geschrieben habe Nachdem der Kommentar übermittelt wurde, rufen Sie die Funktion getcomment() erneut auf, um die

HTML-Vorlage automatisch zu aktualisieren (die Bootstrap-Vorlage wird verwendet):

 <p class="row">
   <p class="comment-list" style="margin-left: 10px">
   </p>
  </p>
  <p class="row">
 <article class="col-xs-12">
     <h4>请评论：</h4>
     <p 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>
     </p>
 </article>
</p>
  <hr>

Funktion anzeigen:

@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}))

Dies ist die Funktion zum Senden von Kommentaren. Vergessen Sie nicht, den CSRF-Dekorator hinzuzufügen.

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 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></p><hr>'
  html += ele
 return HttpResponse(json.dumps({'answer': html}))

Die Funktion zum Abrufen von Kommentaren im Hintergrund.

Löschen Sie abschließend den Textbereichswert:

function resettext() {
 $('.form-control').val('');
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln PHP chinesische Website!

Empfohlene Lektüre:

Ausführliche Anleitung zum Erstellen eines Warenkorbs mit Ajax+PHP

So implementieren Sie den AJAX-Paging-Effekt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Ajax, um Kommentare einzureichen und diese automatisch zu aktualisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!