Maison >interface Web >js tutoriel >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:042637parcourir

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

La raison pour laquelle l'ajout d'un nombre aléatoire après l'adresse de requête ajax empêche la mise en cache du navigateur

JS efface le cache du navigateur IE Méthode

Résoudre le problème du navigateur qui mémorise les requêtes ajax et peut avancer et reculer

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn