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.

score 10 · Accepted Answer · answered Dec 05 '12 at 20:37

10

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

answered Dec 05 '12 at 20:37

second

28,029
7
75
76

Alright my friend, you are the boss. Two questions: 1. In what situation should I take care of the trailing slash in django? 2. Must I add @csrf_exempt for the ajax method? If I don't add it, the browser will give "403 forbidden". Thanks a ton. – Shang Wang Dec 05 '12 at 20:47
3

holy guacamole you saved our bacon! if you ever come to SF, you get a keg of beer on me! – raf Jul 01 '13 at 22:24

score 0 · Answer 2 · edited Oct 17 '17 at 16:16

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);  
            }  
        }  
    });

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

2 Answers2

Linked