A Generic Javascript AJAX to DJANGO Connector

This post is more a posting of a solution than anything else. What I have below is a generic Javascript function which will accept data (in the form of an object like -- see comments in code) and a destination which is the destination of your AJAX handler (a url that points to your views.py function to handle the request). I also include script to acquire the CSRF token which is used in the AJAX communications function and is the default for Django. The function will both send and receive a reply which is then parsed into an object labeled 'data'.

If you are interested in the python (server) side of this communication I have an earlier post that talks about how to handle the server half of a DJANGO - AJAX interaction

CODE:

    
// Requires prototype.js
// Requires jquery.js

// enable use of both prototype and jquery
var $j = jQuery.noConflict();

// get the CSRF Token
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i #1 cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // 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 for AJAX communication of data from Template to View.py and back
    function AJAXConnector(parameters, destination) {
                // myParameters = {'targetPK': pk, };
                myParameters = parameters;
                csrfHeader = {'X-CSRFToken' : csrftoken};
                // This is the start of my AJAX Function
                new Ajax.Request(destination, {
                    method: 'post', parameters: myParameters, requestHeaders: csrfHeader,
                    onSuccess: function (transport) {
                        var response = transport.responseText || "no response text";
                        data = response.evalJSON();
                    },
                    onFailure: function () {
                        alert('Something went wrong...');
                    }
                });
            }

Cheers!

Tommy

View Comments

If you are interested in the python (server) side of this communication I have an earlier post that talks about how to handle the server half of a DJANGO - AJAX interaction

CODE:

    
// Requires prototype.js
// Requires jquery.js

// enable use of both prototype and jquery
var $j = jQuery.noConflict();

// get the CSRF Token
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i #1 cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // 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 for AJAX communication of data from Template to View.py and back
    function AJAXConnector(parameters, destination) {
                // myParameters = {'targetPK': pk, };
                myParameters = parameters;
                csrfHeader = {'X-CSRFToken' : csrftoken};
                // This is the start of my AJAX Function
                new Ajax.Request(destination, {
                    method: 'post', parameters: myParameters, requestHeaders: csrfHeader,
                    onSuccess: function (transport) {
                        var response = transport.responseText || "no response text";
                        data = response.evalJSON();
                    },
                    onFailure: function () {
                        alert('Something went wrong...');
                    }
                });
            }

Cheers!

Tommy