Heim > Web-Frontend > js-Tutorial > So verwenden Sie Ajax, um Kommentare einzureichen und diese automatisch zu aktualisieren

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

php中世界最好的语言
Freigeben: 2018-03-31 15:29:36
Original
2861 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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}))
Nach dem Login kopieren

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}))
Nach dem Login kopieren

Die Funktion zum Abrufen von Kommentaren im Hintergrund.

Löschen Sie abschließend den Textbereichswert:

function resettext() {
 $('.form-control').val('');
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage