jquery - 如何在 Django 中发布异步表单？csrf问题

Question

我有一个作品，我用延迟加载加载评论。但是每条评论下方都有一个表单字段来回复该评论。该表单域的方法存在于 post 和{{csrf_token}}. 问题是当我加载惰性时，csrf_token 在新评论下的表单中不起作用。当我提交表单时，由于这个原因，我收到一个 csrf_token 错误。我使用 jQuery 的 append 方法进行延迟加载。我怎么解决这个问题。

注意：当我使用 csrf_exempt 装饰器函数时，它会将我重定向到我返回 JsonResponse 的 url。

更新：

部分comment.html

<div class="media-holder mt-5" id="all_accepted_comments">
  
  {% for item in comments %}
  <div class="infinite-container">
  <div class="media mb-5">
    <img class="img-fluid rounded-circle box-shadow mr-4" alt="image" src="{{item.owner.get_image_or_default}}" style="width: 100px;height: 100px;">
    <div class="media-body">
      <h6>{{item.owner.name}}  {{item.owner.surname}}</h6> 
      <br>
      <small><span style="font-size:14px;" class="stars-container stars-{% widthratio item.rate.rate 1 20 %}" id="stars">★★★★★&lt;/span></small>
      <div class="comment-date"> <span class="date">{{item.created_date|naturaltime}}</span>
      </div>
      <p>{{item.content}} </p>
      
      <div align="center">
        <a href="javascript:void(0)" class="show-answers" id="comment-id-{{item.id}}">{% if item.comments.all %}Cevapları Görüntüle ({{item.comments.count}}){% else %}Cevap Ver{% endif %}</a>
      </div>
      
      <div class="generic-comment" id="generic-comment-id-{{item.id}}" style="display:none;">
        <!-- -->
        <div class="infinite-generic-comment">
        <form action="{% url 'blogs:comment-answer' %}" method="POST" id="answer_form">
        {% csrf_token %}
        <input type="hidden" name="comment_id" value="{{item.id}}">
        <input type="hidden" name="blog_slug" value="{{item.content_object.slug}}">
          <div class="row">
            <div class="col-9">
              <input type="text" placeholder="Cevap Ver" name='generic_comment' class="form-control">
            </div>
            <div class="col-2">
              <input type="submit" value="Cevap Ver" class="btn btn-outline-primary">
            </div>
           </div>
          </form>
          {% for comment in item.comments.all %}
          <div class="media mb-2">
            <img class="img-fluid rounded-circle box-shadow mr-4" alt="image" src="{{item.owner.get_image_or_default}}" style="width: 100px;height: 100px;">
            <div class="media-body">
              <h6>{{comment.owner.name}}  {{comment.owner.surname}}</h6> 
              <div class="comment-date"> <span class="date">{{comment.created_date|naturaltime}}</span>
              </div>
              <p>{{comment.content}} </p>
            </div>
          </div>
          {% endfor %}
        </div>
        <!-- -->
      </div>
    </div>
    
  </div>
</div>
{% endfor %}
</div>
<script>
 
var aTag = document.getElementsByClassName('show-answers')
for (let i = 0; i< aTag.length; i++){
  aTag[i].addEventListener('click', (event) => {

    var generic = document.getElementById(`generic-${event.target.id}`)
    if (generic.style.display == 'none'){
      $(`#generic-${event.target.id}`).slideDown('slow')
    }
    else{
      $(`#generic-${event.target.id}`).slideUp('slow')
    }
  })
}

$(document).ready(function(){
  $('#answer_form').submit(function(e){
    e.preventDefault()
    var serializedData = $(this).serialize()
    var url = $(this).attr('action')

    $.ajax({
      type:'POST',
      url: url,
      data:serializedData,
      success: function(response){
        if (response.success){
          $('#answer_form').trigger('reset')
          Swal.fire(
          'Success!',
          'Answer send',
          'success'
          )
        }
      }
    })
  })
})
</script>

blog_detail.html

<div class="media-holder mt-5">
            <h3 class="title mb-3">All Comments</h3>
          </div>
          <div id="blog-comment-list">
            {% include 'front_end/blog/comment/partial-comment.html' %}
          </div>
            <form method="GET" id="load_form" limit="{{num_pages}}">
            <input type="hidden" name="pk" value="{{details.id}}">
            <input type="hidden" name="page" value="2" id="pagination">
            {% if num_pages != 1 %}
            <input type="submit" name="load" value="Load More" id="submit_button" class="btn btn-outline-info">
            {% endif %}
            </form>

$(document).ready(function(){
  $('#load_form').submit(function(e){
    e.preventDefault();
    var limit = $(this).attr('limit')
    var page = document.getElementById('pagination')
    var blog_comment_list = $('#blog-comment-list')
    var serializedData = $(this).serialize();

    $.ajax({
      type:'GET',
      url: "{% url 'blogs:load-more-comments' %}",
      data : serializedData,
      success: function(response){
        blog_comment_list.append(response.comment_html)
        if (page.value >= limit){
          $('#submit_button').hide()
        }
        page.value = parseInt(page.value)+1
      },
    })
  })
})

当我按下加载更多按钮时，{{csrf_token}} 没有出现在新添加的评论下的表单字段中，因此 Django 给出了 403 错误。

标签： jquerypython-3.xdjango