JQuery AJAX BeforeSend CSRF保护

Question

我有一个显示JSON响应的AJAX进程。如果我禁用CSRF保护，则该过程有效。我得到了HTTP 200，我得到了JSON响应。

以下是工作表：

$(document).ready(function() {

    //AJAX
    $('form').on('submit', function(event) {
        $.ajax({
            data : {
                user : $('#user').val(),
                password : $('#password').val()
            },
            url: '/loginproc',
            type: 'POST'
        })
        .done(function(data) {
            if (data.error) {
              $('#errorAlert').text(data.error).show();
              $('#successAlert').hide();
            }
            else {
              $('#successAlert').text(data.xx).show();
              $('#errorAlert').hide();
            }
        });
         event.preventDefault();
    });

});

这在语法上是否正确？我是否需要在＆＃34; .done＆＃34;？

之前添加分号

我正在使用Flask-WTForms CSRF保护，文档说明如下：

  

发送AJAX请求时，请向其添加X-CSRFToken标头。对于   例如，在JQuery中，您可以配置发送令牌的所有请求。

<script type="text/javascript">
    var csrf_token = "{{ csrf_token() }}";

    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrf_token);
            }
        }
    });
</script>

使用以下JS我能够获取HTTP 200，但是我没有得到任何返回的JSON数据

$(document).ready(function() {

    $('form').on('submit', function(event) {

        var csrf_token = "{{ csrf_token() }}";

        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken)
                }
            }
        });

        $.ajax({
            data : {
                user : $('#user').val(),
                password : $('#password').val()
            },
            url: '/loginproc',
            type: 'POST'
        })
        .done(function(data) {
            if (data.error) {
              $('#errorAlert').text(data.error).show();
              $('#successAlert').hide();
            }
            else {
              $('#successAlert').text(data.xx).show();
              $('#errorAlert').hide();
            }
        });
         event.preventDefault();
    });

});

这是远程正确吗？我确实得到了HTTP 200，但没有返回JSON数据。 JQuery / AJAX让我很困惑。

问题：

1. 表单1（没有CSRF的工作表单）在语法上是否合适？
2. 我不应该使用＆＃34; ajaxSetup＆＃34;？
3. 为什么我没有收到JSON数据的任何想法？我是否还需要将回报包装在CSRF中？

非常感谢帮助，感谢您的时间。

语法正确且功能正常  2. s

Answer 1

我建议你移动event.preventDefault（）;在事件提交之后也使用console.log，这样你就可以检查变量是否包含你的想法，控制台在你的浏览器中只是google如何在你的浏览器中打开你的控制台，这样你就可以检查包含csrf_token的内容以及长度和数据在＆＃34;完成＆＃34;的回应中aaand添加.fail以便您可以处理有错误的服务器响应。

关于以下问题：＆＃39;我是否需要在＆＃34; .done＆＃34;？＆＃39;之前添加分号？答案是否定的，因为这称为方法链示例：$（＆＃34;＃id＆＃34;）。show（）。css（＆＃34; background＆＃34;，＆＃34; red＆＃34;） ;在示例im chaining show和css中，您可以一次链接这么多方法;）

＆＃13;

＆＃13;

$(document).ready(function() {

    $('form').on('submit', function(event) {
        event.preventDefault();
        var csrf_token = "{{ csrf_token() }}";
        console.log("csrf_token: ", csrf_token);

        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken)
                }
            }
        });

        $.ajax({
            data : {
                user : $('#user').val(),
                password : $('#password').val()
            },
            url: '/loginproc',
            type: 'POST'
        })
        .done(function(data) {
            console.log("done", data.length, data); 
            if (data.error) {
              $('#errorAlert').text(data.error).show();
              $('#successAlert').hide();
            }
            else {
              $('#successAlert').text(data.xx).show();
              $('#errorAlert').hide();
            }
        })
        .fail(function( jqXHR, textStatus, errorThrown ) {
            console.error("response with error:", jqXHR, textStatus, errorThrown);
        });             
    });

});

＆＃13;

＆＃13;

＆＃13;