Adding AJAX to Python Django projects

A very nice explanation on SO regarding what and why about AJAX from Django perspective:
https://stackoverflow.com/questions/20306981/how-do-i-integrate-ajax-with-django-applications

So, specifically in Django, when we use AJAX to do a form POST request, we need a CSRF token. This is a security feature. If we are using Django templates, the templates do the job of generating a csrf token and tacking it along with the POST request data sent to the server. But when we are doing form POST via AJAX call, there are no Django templates involved. Hence this CSRF token generation and insertion has to be done manually. Since this is such a common scenario, Django itself has published javascript methods to do this CSRF token generation and have them added to jQuery.

Django documentation for AJAX integration

:
https://docs.djangoproject.com/en/3.0/ref/csrf/

Code Snippet

So, from the above link from official Django documentation, below is the code regarding how to do it. Just have this code in the static javascript files area and then include this js file in your base.html. This will take care to generate csrf token and add it to all AJAX form POST, so long as they are done via jQuery. In fact, you can use jQuery just to do AJAX in other projects like React and Angular as well.

$(document).ready(function(){
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');

    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);
            }
        }
    });
})
Tek Shinobi
Author: Tek Shinobi

Hiya Ninjas, I am the ninja who invented the fire, wheel, science, technology and everything intelligent this humanity has ever experienced since its evolution from monkeys and germs. Actually, above is a partial list. I also was involved with the Big Bang that created this universe. What was it like before the Big Bang is so secret that if I tell you, I will have to turn you into a hobbit and force you to be my gardener. Okay. Sayonanra, Namaste Tek Shinobi




1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *