0

我正在尝试以 JSON 格式提交 AJAX 表单。

但是每当提交表单时，我都会重定向到表单操作页面。

HTML

<form id="acc" action="#" method="post" autocomplete="off">{% csrf_token %}
            <p>Username: {{accform.username}}</p>
            <p>Password: {{accform.password}} </p>
            <center><input type="submit" value="update" class="button" /></center>
        </form>

jQuery

    $("#acc").submit(function(){
        username = $(this).find("#id_username").val();
        password = $(this).find("#id_password").val();
        var arr = { "X-CSRFToken": getCookie("csrftoken"), "username": username, "password": password};
        $.post("/myaccount/", arr,function(data){
            alert(data);
        }, "json");
        return false;
    });

我也尝试过的上述代码的替代方法是：

$("#acc").submit(function(){
                username = $(this).find("#id_username").val();
                password = $(this).find("#id_password").val();
                var arr = { "X-CSRFToken": getCookie("csrftoken"), "username": username, "password": password};
                $.ajax({
                    url: '/myaccount/',
                    type: 'POST',
                    data: JSON.stringify(arr),
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    async: false,
                    success: function(msg) {
                        alert(msg);
                    }
                });
                return false;
            });

我还注意到只有在获取csrftokencookie 时才会被重定向。

这是为什么？

4

3 回答 3

1

如果使用这个Jquery cookie 库，这是我正在使用的，@Archer 也建议我，那么你确实需要获取 cookie$.cookie("cookie_name")

如果您这样做，整个功能都可以正常工作，并且在使用 AJAX 发布数据时不会出错。
也返回 false 足以停止提交表单。event.preventDefault();没有必要。

那么整个完整的代码是：

$(function(){
            $("#acc").submit(function(){
                username = $(this).find("#id_username").val();
                password = $(this).find("#id_password").val();
                var arr = { "csrfmiddlewaretoken": $.cookie("csrftoken"), "username": username, "password": password};
                $.post("/myaccount/", arr,function(data){
                    alert(data.test);
                }, "json");
                return false;
            });
        });

此外，如果您包含{% csrf_token %}在您的 HTML 代码中，那么您可以从 Cookie 或<input type="hidden" name="csrfmiddlewaretoken">它在表单中创建的值中获取值。

于 2013-07-23T12:50:37.837 回答
0

首先，我认为添加这一行会阻止表单在函数计算时提交：

$("#acc").submit(function(e){
    e.preventDefault(); // LINE ADDED
    /* treatment here */
    return false;
});

此外，为了避免将 CSRF 令牌与您的数据混合，您可以在使用任何 Ajax 请求之前调用以下函数：

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);
        }
    }
});
于 2013-07-23T12:02:05.890 回答
0

发生这种情况是因为当您使用getCookie它时，它不会被识别为函数，因此 javascript 停止运行。您需要将调用替换为getCookie确实存在的函数。

使用这个库...

https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js

将以下代码行更改为...

var arr = { "X-CSRFToken": $.cookie("csrftoken"), "username": username, "password": password};

我假设您从其他地方获得了代码，并假设getCookie它是一个有效的函数，但实际上它不是。

于 2013-07-23T12:26:54.630 回答