Question

我正在尝试以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;
            });

我还注意到，只有在获取csrftoken Cookie时才会重定向。

为什么？

Answer 1

如果使用this Jquery cookies库，我正在使用的那个和@Archer建议我那么你需要将cookie作为$.cookie("cookie_name")

如果您这样做，整个功能正在运行，我在使用AJAX发布数据时没有错误返回false也足以阻止表单提交。 <{1}}没有必要。

完整的代码是：

event.preventDefault();

此外，如果您在HTML代码中加入$(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; }); });，则可以从Cookie或其在表单中创建的{% csrf_token %}中获取值。

Answer 2

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

$("#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);
        }
    }
});

Answer 3

这种情况正在发生，因为当您使用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是一个有效的函数，而不是。

使用AJAX以JSON形式提交表单

3 个答案: