Maison > Article > interface Web > Code d'implémentation pour Django Ajax soumettre des commentaires et actualiser automatiquement la fonction

Code d'implémentation pour Django Ajax soumettre des commentaires et actualiser automatiquement la fonction

亚连original: 2018-05-22 13:54:042535parcourir

Cet article présente principalement le code d'implémentation de la soumission de commentaires ajax de Django et la fonction d'actualisation automatique. Les amis qui en ont besoin peuvent s'y référer

Après avoir essayé plusieurs fois, je l'ai enfin compris, téléchargeons le code. (J'utilise l'ajax de jQuery, pas natif)

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

Appelez la fonction getcomment() après le chargement du texte intégral pour obtenir les commentaires de la base de données, écrits par moi-même. Après le commentaire est soumis, appelez à nouveau la fonction getcomment() pour actualiser automatiquement le

modèle HTML (le modèle bootstrap est utilisé) :

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

Fonction View :

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

C'est la fonction pour soumettre des commentaires. N'oubliez pas d'ajouter la fonction décorateur csrf

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

pour obtenir des commentaires en arrière-plan.

Effacez enfin la valeur textarea :

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus