django/ajax: Unable to get Ajax post data in the views.py

Question

I had a problem getting ajax post data from django backend, I don't know how to pass the value, please help.

In html I have simply this:

<form id="get_vulns_from_family">
    <label for="family_content">Enter a family name to display the NVTs</label>
    <input id="family_content" />
    <input type="submit" value="search" />
</form>

In javascript I wrote this:

$(function() {
    $("#get_vulns_from_family").submit(function(event) {
        var family_text = $("#family_content").val();
        var family_data = {"family": family_text};
        $.ajax({
            url: "/template_conf/get_vulns_from_family",
            type: "POST",
            data: family_data,
            success: function(response) {
                console.log(response);
            },
            error: function(response) {
                console.log("failed!");
            }
        });
        // prevent default posting of form
        event.preventDefault();
    });
});

In Django method corresponding to url /template_conf/get_vulns_from_family, I tried this:

def get_vuln_from_family(request):
    family = request.POST['family']
    # some other operations to get value for variable "json_data"
    return HttpResponse(simplejson.dumps(json_data))

But django said: MultiValueDictKeyError: "Key 'family' not found in <QueryDict: {}>", which means the POST dictionary is empty. Am I using the wrong way to get post data? If so what should I do? Thanks.

Answer 1

If your CSRF enabled then simple ajax post do not work. you will have to add the csrf token and set it to the ajax request header.

For Ajax POST request, you have to pass the CSRF token in as POST data with every POST request. For this reason, you must get CSRF token first. Since you have enabled CSRF protection so you will get the token from csrftoken cookie. The CSRF token cookie is named csrftoken by default. Acquiring the token is very straight forward and it can be achieved using the below code snippet.

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 = jQuery.trim(cookies[i]);  

            if (cookie.substring(0, name.length + 1) == (name + '=')) {  
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));  
                break;  
            }  
        }  
    }  
    return cookieValue;  
}  



function csrfSafeMethod(method) {  

    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));  
}  

function sameOrigin(url) {  

    var host = document.location.host; // host + port  
    var protocol = document.location.protocol;  
    var sr_origin = '//' + host;  
    var origin = protocol + sr_origin;  

    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||  
        (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||  

        !(/^(\/\/|http:|https:).*/.test(url));  
}  





$(function() {  

        $("#person_form_id").submit(function(event){  

            event.preventDefault();  
            $.ajax({  
                type:$(this).attr('method'),  

                url:"",  
                data:$(this).serialize(),  
                success: function(){  
                    $('#message').html("<h2 style='color:green;'>Person Form Submitted!</h2>")  
                },  
                error: function(){  
                    $('#message').html("<h2 style='color:red;'>Can't submit form</h2>")  
                }  
            });  
            return false;  
        });  

    });  
    $.ajaxSetup({  
        beforeSend: function(xhr, settings) {  
            if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {  
                // Send the token to same-origin, relative URLs only.  
                // Send the token only if the method warrants CSRF protection  
                // Using the CSRFToken value acquired earlier  

                xhr.setRequestHeader("X-CSRFToken", csrftoken);  
            }  
        }  
    });  

Answer 2

your url "/template_conf/get_vulns_from_family" is missing a trailing slash. django will typically redirect this to "/template_conf/get_vulns_from_family/", dropping the POST data