Implementation code for django ajax submit comments and automatically refresh function-JS Tutorial-php.cn

Implementation code for django ajax submit comments and automatically refresh function

亚连

Release： 2018-05-22 13:54:04

Original

2593 people have browsed it

This article mainly introduces the implementation code of django ajax submission comment and automatic refresh function. Friends who need it can refer to it

After trying many times, I finally got it, let’s upload the code. (I use jQuery's ajax, not native)

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>

Copy after login

Call the getcomment() function after the full text is loaded, get the comments from the database, and submit the comments written by yourself Then call the getcomment() function again to automatically refresh the

html template (the bootstrap template is used):

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

Copy after login

View function:

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

Copy after login

This is the function to submit comments, Don’t forget to add the 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}))

Copy after login

Function to get comments in the background.

Finally clear the value of textarea:

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

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

The reason why adding a random number after the ajax request address prevents browser caching

JS clears the IE browser cache Method

Solve the problem of the browser remembering ajax requests and being able to move forward and backward

The above is the detailed content of Implementation code for django ajax submit comments and automatically refresh function. For more information, please follow other related articles on the PHP Chinese website!