个人中心
gpt4 book ai didi

jquery - Django 1.5 CSRF Ajax

转载 作者：太空狗 更新时间：2023-10-30 02:47:51 24 4
gpt4 key购买 nike

我正在尝试创建一个 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 的 suggested code用于处理 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 使用的 View :

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 错误消息。此外，如果我出于测试目的在我的 View 顶部使用 @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'),

最佳答案

如果我是你，我会删除“//用于处理 CSRF 的样板，来自 Django 的网站”评论下方的 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 token ...这可以通过 form.serialize() 以及所有表单数据轻松完成。 ..

关于jquery - Django 1.5 CSRF Ajax，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15588388/

24 4 0
文章推荐： Python 结构大小不匹配
文章推荐： python - 特殊情况下的 re.split()
文章推荐： python - 在 Pyglet 中使用 numpy 数组和 ctypes 进行 OpenGL 调用
文章推荐： python - python中巨大矩阵的矩阵运算
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com