4

我正在尝试创建一个 Web 应用程序,该应用程序在单击某些按钮时进行 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:

$(文档).ready(函数() {

// 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 请求并返回 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}))

不幸的是,当我尝试单击 Submit Squats 按钮并运行 jQuery 时,我收到一条CSRF Token Missing or Incorrect错误消息。此外,如果我在视图顶部使用 @csrf_exempt 标识符进行测试,则会收到以下错误:

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

因此,即使我要修复 CSRF 问题,我的 Ajax 代码似乎还有其他问题。但我想解决这两个问题。帮助!

更新的代码(见下面凯瑟琳的帖子):

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

2 回答 2

3

如果我是你,我会在“// Boilerplate for handling CSRF, from Django's website”评论下删除那个AJAX,并用这个替换“实际的ajax”:

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

如果您收到 403 错误,那一定是因为您没有发送 csrf 令牌...这很容易通过form.serialize()以及所有表单数据...

于 2013-03-23T15:39:00.560 回答
2

删除用于 csrf_token 实施的脚本。只需在您的 ajax 函数中添加 csrf_token 即可。

脚本

$(document).ready(function() {
    $("#submitSquats").click(function() {
        var exercise = "squats";
        var amount = $('#squatsVal').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(data) {
                $('#squats').html('<span>Success</span>');
                alert(data); //for testing
            },
            error: function(ts) { 
                alert(ts.responseText);
            }
        });
        return false;
    });
});

在你的views.py中

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

网址.py

别忘了放在/前面$

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

模板

<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>
于 2013-03-23T15:29:55.423 回答