Comment utiliser ajax pour soumettre des commentaires et les actualiser automatiquement

Cette fois, je vais vous montrer comment utiliser ajax pour soumettre des commentaires et les actualiser automatiquement. Quelles sont les précautions pour utiliser ajax pour soumettre des commentaires et les actualiser automatiquement. Ce qui suit est un cas pratique, allons-y. jetez un oeil.

Après avoir essayé plusieurs fois, j'ai finalement compris, codons-le. (J'utilise l'ajax de jQuery, pas natif)

Code js :

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

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

C'est la fonction pour soumettre des commentaires. N'oubliez pas d'ajouter le 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 = ''
 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}))

La fonction pour obtenir des commentaires en arrière-plan.

Effacez enfin la valeur textarea :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le. Site Web chinois PHP !

Lecture recommandée :

Tutoriel détaillé sur la création d'un panier avec Ajax+PHP

Comment l'implémenter Effet de pagination AJAX

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!