Heim > Web-Frontend > js-Tutorial > Implementierungscode für Django Ajax zum Senden von Kommentaren und zur automatischen Aktualisierungsfunktion

Implementierungscode für Django Ajax zum Senden von Kommentaren und zur automatischen Aktualisierungsfunktion

亚连
Freigeben: 2018-05-22 13:54:04
Original
2639 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Implementierungscode der Django-Ajax-Kommentarübermittlung und der automatischen Aktualisierungsfunktion vorgestellt. Freunde, die ihn benötigen, können darauf verweisen

Nachdem ich es viele Male versucht habe, habe ich es endlich verstanden. Laden wir den Code hoch. (Ich verwende Ajax von jQuery, nicht nativ)

js-Code:

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

Rufen Sie die Funktion getcomment() auf, nachdem der vollständige Text geladen wurde, rufen Sie die Kommentare aus der Datenbank ab und senden Sie die geschriebenen Kommentare Rufen Sie dann 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 == &#39;POST&#39;:
  comments = request.POST[&#39;comment&#39;]
  if len(comments) < 5:
   result = u&#39;评论数需大于5&#39;
   return HttpResponse(json.dumps({&#39;result&#39;: result}))
  else:
   result = &#39;successfully&#39;
   Comment.objects.create(content= comments, article_id=article_id)
   return HttpResponse(json.dumps({&#39;result&#39;: result}))
Nach dem Login kopieren

Das ist die Funktion zum Senden von Kommentaren. Vergessen Sie nicht, die Funktion csrf decorator

def get_comment(request, article_id):
 article_list = get_object_or_404(Article, id=article_id)
 comments = article_list.comment_set.all()
 html = &#39;&#39;
 for i in comments:
  ele = &#39;<p class="row"><article class="col-xs-12"><p class="pull-right"><span class="label label-default">作者:&#39; + &#39;i.user&#39; + &#39;</span></p><p>&#39; + i.content + &#39;<ul class="list-inline"><li><a href="#" rel="external nofollow" ></a></li></ul></article></p><hr>&#39;
  html += ele
 return HttpResponse(json.dumps({&#39;answer&#39;: html}))
Nach dem Login kopieren

hinzuzufügen, um Kommentare im Hintergrund zu erhalten.

Endlich den Wert von textarea klären:

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Der Grund, warum das Hinzufügen einer Zufallszahl nach der Ajax-Anfrageadresse das Browser-Caching verhindert

JS löscht den IE-Browser-Cache Methode

Lösen Sie das Problem, dass sich der Browser Ajax-Anfragen merkt und sich vorwärts und rückwärts bewegen kann

Das obige ist der detaillierte Inhalt vonImplementierungscode für Django Ajax zum Senden von Kommentaren und zur automatischen Aktualisierungsfunktion. 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