Django 1.5 CSRF Ajax

Question

I'm trying to create a web app that makes Ajax calls when certain buttons are clicked, updating data in my models and displaying the updated data. Here is my template:


    
        
        
    


    Squats:  {{ user.weekOne.squats }} done.

    Lunges: {{ user.weekOne.lunges }} done.

    Stair Days: {{ user.weekOne.stairDaysCount }}

    Skip Stairs: {{ user.weekOne.skipStairs }}

        
            {% csrf_token %}

I use Django's suggested code for dealing with Ajax and CSRF. Here is my resultant jQuery:

$(document).ready(function() {

// Boilerplate for handling CSRF, from Django's website

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]);
            // 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');

$.ajaxSetup({
    crossDomain: false, // obviates need for sameOrigin test
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type)) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});
// the actual Ajax
$("#submitSquats").click(function() {
    var exercise = "squats";
    var amount = $('#squats').val();
    var data = {'exercise': exercise, 'amount': amount};
    $.ajax({
        type:"POST",
        url:"submitWorkout1",
        data: data,
        success: function() {
            $('#squats').html('Success');
        }
    });
    return false;
});

});

Finally, here is the view that handles the incoming Ajax request and returns a response for the Ajax to work with:

def submitWorkout1(request):
    exercise = request.POST['exercise']
    amount = request.POST['amount']
    user = UserProfile.objects.get(user=request.user)
    exercise, amount = user.WeekOne.updateExercise(exercise, amount)
    return HttpResponse(simplejson.dumps({'result': 'success', exercise: amount}))

Unfortunately, when I try to click on the Submit Squats button and run the jQuery, I get a CSRF Token Missing or Incorrect error message. Moreover, if I use a @csrf_exempt identifier on top of my view for testing purposes, I get this error:

"Key 'exercise' not found in "

So even if I were to fix the CSRF problem, it appears there is something else wrong with my Ajax code. But I want to fix both problems. Help!

Updated code (see catherine's post below):

HTML:



    Squats:  {{ user.weekOne.squats }} done.

    Lunges: {{ user.weekOne.lunges }} done.

    Stair Days: {{ user.weekOne.stairDaysCount }}

    Skip Stairs: {{ user.weekOne.skipStairs }}

         
            {% csrf_token %}

jQuery:

$(document).ready(function() {
    $("#submitSquats").click(function() {
        var exercise = "squats";
        var amount = $('#squats').val();
        $.ajax({
            type:"POST",
            url:"/workout_game_app/workouts/submitWorkout1/",
            data: {'exercise': exercise,
                    'amount:': amount,
                    'csrfmiddlewaretoken': '{{csrf_token}}'},
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function() {
                $('#squats').html('Success');
            }
        });
        return false;
    });
});

view:

def submitWorkout1(request):
    if request.method == 'POST':


        exercise = request.POST['exercise']
        amount = request.POST['amount']
        user = UserProfile.objects.get(user=request.user)
        exercise, amount = user.WeekOne.updateExercise(exercise, amount)
        data = simplejson.dumps({
            'result': 'success',
            'exercise': exercise,
            'amount': amount
            }, indent=4)
        return HttpResponse(data, mimetype="application/javascript")

URL:

urlpatterns = patterns('',
        url(r'^$', 'workout_game_app.views.index'),
        url(r'^signup$/', 'workout_game_app.views.signup'),
        url(r'^login$/', 'workout_game_app.views.login_view'),
        url(r'^logout/$', 'workout_game_app.views.logout_view'),
        url(r'^workouts/workout1/$', 'workout_game_app.views.workout1'),
        url(r'^workouts/submitWorkout1/$',
            'workout_game_app.views.submitWorkout1'),

marianobianchi · Accepted Answer

If i were you, i would remove that AJAX below the "// Boilerplate for handling CSRF, from Django's website" comment and replace "the actual ajax" with this:

// the actual Ajax
$("#submitSquats").click(function() {
    var form = $(this).parent();
    $.post(
        "submitWorkout1", //url
        form.serialize(), //data
        function() {      //success method
            $('#squats').html('Success');
        }
    );
    return false;
});

If you are getting a 403 error, it must be because you are not sending the csrf token... This is easily done with form.serialize(), together with all form data....

Django 1.5 CSRF Ajax

Answers (2)

Related Questions