JQuery AJAX BeforeSend CSRF Protection

I have a AJAX process that displays a JSON response. If I disable CSRF protection, the process works. I get HTTP 200 and I get the JSON response.

Following is the working form:

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

});

Is that syntactically correct? Do I need to add a semicolon before ".done"?

I am using Flask-WTForms CSRF protection and the documentation states the following:

When sending an AJAX request, add the X-CSRFToken header to it. For example, in JQuery you can configure all requests to send the token.

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

Using the following JS I am able to get the HTTP 200 however, I do not get any JSON data returned

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

});

Is that remotely correct? I do get the HTTP 200, but not JSON data returned. JQuery/AJAX has me quite confused.

Questions:

1. Is form 1 (working form without CSRF) syntactically proper?
2. Should I not be using "ajaxSetup"?
3. Any ideas why I am not getting the JSON data back? Do I need to wrap the return in the CSRF too?

Help is greatly appreciated, thank you for your time.

syntactically correct and properly functional 2. s