Как правильно выполнить запрос AJAX в Django

Question

Я создал форму в шаблоне с тегом {% csrf_token %}, выводим форму, как показано ниже:

 <form id="appl_detail13" action="/13/devices/" method="post">
    <input type="hidden" name="csrfmiddlewaretoken" value="gTOpBTi6rljV5dKsGE0kuzD1IkghAlzW7GdiBZw6pMMaMUxJSlVev5YqPef6jhjb">
   <input name="appl_checkbox" id="5" type="checkbox" class="form-check-input applcheck" value="13"> 
</form>

При установке флажка я выполняю запрос ajax, но не отправляю токен csrf:

$(".applcheck").click(e=>{
    $.post('/13/devices/',{data:'postedvalue'}, data=> {
        console.log(data)
    })
})

Url Mapper:

urlpatterns = [
    # ex: /13/devices/
  path('<int:application_id>/devices/', views.ApplicationDetail, name='application-detail'),
]

Мой взгляд принимает запрос и должен отправить JSON.

def ApplicationDetail(request, application_id):
     if request.method == 'POST':
        device = Device.objects.all().filter(application_id=application_id)
        data = serializers.serialize('json', device)

        return HttpResponse(data, content_type='application/json')
     else:
        return HttpResponse('no posted')

Так я получаю ошибка ниже:

PS Я знаю, что есть много учебников по этому вопросу, но многие из них устарели, и есть неработающие ссылки.

Answer 1

Вам необходимо добавить CSRF в заголовок вызовов ajax, попробуйте это -

(function() {
  $.ajaxSetup({
      headers: { "X-CSRFToken": getCookie("csrftoken") }
  });

  function getCookie(c_name)
  {
  if (document.cookie.length > 0)
  {
      c_start = document.cookie.indexOf(c_name + "=");
      if (c_start != -1)
      {
          c_start = c_start + c_name.length + 1;
          c_end = document.cookie.indexOf(";", c_start);
          if (c_end == -1) c_end = document.cookie.length;
          return unescape(document.cookie.substring(c_start,c_end));
      }
  }
  return "";
  }
}());

Answer 2

Если вы звоните из формы, это не совсем то, как вы отправляете запрос Ajax (потому что он загружает страницу)

Это то, как вы отправляете запрос ajax с помощью csrf:

$.ajax({
      type: "GET",
      url: "/13/devices/",
      beforeSend: function (xhr) {
        xhr.setRequestHeader('X-CSRFToken', '{{csrf_token}}');
      },
      success: function (data) {
        console.log(data);
      }

Хорошо, если вы хотите, чтобы ваш javascript файл принимал Django, просто объявите глобальную переменную в javascript (в вашем шаблоне script tag before вы импортируете javascript с запросом ajax) :

<script>
   var csrfToken = {{ csrf_token }};
</script>

и в вашем javascript просто используйте:

beforeSend: function (xhr) {
   xhr.setRequestHeader('X-CSRFToken', csrfToken);
},