Django csrf token for Ajax Django csrf token for Ajax ajax ajax

Django csrf token for Ajax


See below for how I changed your code. The csrf_token is assigned to a variable with Django templating. You can produce this variable in any of your Javascript code.

The token is then included in the header

 <script>    var token = '{{csrf_token}}';    $("#id_username").change(function () {      console.log($(this).val());      var form = $(this).closest("form");      $.ajax({        headers: { "X-CSRFToken": token },        url: form.attr("data-validate-username-url"),        data: form.serialize(),        dataType: 'json',        success: function (data) {          if (data.is_taken) {            alert(data.error_message);          }        }      });    });  </script>


The documentation very well explained how to use AJAXhttps://docs.djangoproject.com/en/2.1/ref/csrf/

  1. Get this library https://github.com/js-cookie/js-cookie/
  2. Add this var csrftoken = Cookies.get('csrftoken');
  3. The last step is configure ajax setup

    function csrfSafeMethod(method) {// these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));}$.ajaxSetup({  beforeSend: function(xhr, settings) {    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {        xhr.setRequestHeader("X-CSRFToken", csrftoken);    }  }});


Update to the steps above - as the Django documentation indicates you can use the Javascript Cookie library to do a Cookies.get('csrftoken'). Also, I had to add {% csrf_token %} before the function call. Might be obvious, but I didn't know so providing it here to help others