Django 1.5 CSRF Ajax

Question

我正在尝试创建一个网页应用，当某些按钮被点击时，它会发起Ajax请求，更新我的数据模型并显示更新后的数据。下面是我的模板：

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="{{ STATIC_URL }}/workout1.js"></script>
    </head>
<body>

    <span id="squats">Squats:  {{ user.weekOne.squats }} done.<br/></span>
    <span id="lunges">Lunges: {{ user.weekOne.lunges }} done.<br /></span>
    <span id="stairDays">Stair Days: {{ user.weekOne.stairDaysCount }}<br/></span>
    <span id="skipStairs">Skip Stairs: {{ user.weekOne.skipStairs }}<br /></span>
        <form>
            {% csrf_token %}
            <input type="text" name="squats" id="squatsVal" value="Squats" />
            <input type="submit" id="submitSquats" value="Add Squats"/><br />
        </form>

        <form>
            <input type="text" name="lunges" value="Lunges" />
            <input type="submit" value="Add Lunges" /><br />
        </form>

        <form>
            <input type="submit" value="Stairs skipped."><br />
        </form>
</body>
</html>

我使用了Django推荐的处理Ajax和CSRF的代码。以下是我得到的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('<span>Success</span>');
        }
    });
    return false;
});

});

最后，这是处理Ajax请求并返回响应的视图：

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

不幸的是，当我尝试点击“提交深蹲”按钮并运行jQuery时，出现了一个错误信息：CSRF Token Missing or Incorrect。而且，如果我在视图上方使用@csrf_exempt标识符进行测试，我会得到这个错误：

"Key 'exercise' not found in <QueryDict: {u'undefined': [u'', u'']}>"

所以即使我解决了CSRF的问题，似乎我的Ajax代码还有其他问题。但我想同时解决这两个问题。求助！

更新的代码（见下面catherine的帖子）：

HTML：

<body>

    <span id="squats">Squats:  {{ user.weekOne.squats }} done.<br/></span>
    <span id="lunges">Lunges: {{ user.weekOne.lunges }} done.<br /></span>
    <span id="stairDays">Stair Days: {{ user.weekOne.stairDaysCount }}<br/></span>
    <span id="skipStairs">Skip Stairs: {{ user.weekOne.skipStairs }}<br /></span>
        <form method="POST" action="{% url workout_game_app.views.submitWorkout1 %}"> 
            {% csrf_token %}
            <input type="text" name="squats" id="squatsVal" value="Squats" />
            <input type="submit" id="submitSquats" value="Add Squats"/><br />
        </form>
</body>

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('<span>Success</span>');
            }
        });
        return false;
    });
});

视图：

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")

网址：

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'),

django error handling ajax web application jquery template rendering csrf data model

Django 1.5 CSRF Ajax

2 个回答

撰写回答