How do I add my csrf token to my jQuery call?

Question

My server generates a csrfToken, which is inserted into the following element:

<input type="hidden" name="_csrf" value="{{_csrfToken}}">

The {{_csrfToken}}, is used for templating, but at run time is replaced at the server with the actual token.

<div class="formContainer">
    <form class="form-horizontal signupform" role="form" action="/process?form=signupform" method="POST">
    <input type="hidden" name="_csrf" value="{{_csrfToken}}">
        <div class="form-group">
            <label for="fieldName" class="col-sm-2 control-label">Name</label> 
            <div class="col-sm-4">
                <input type="text" class="form-control"
                id="fieldName" name="name">
             </div>
        </div>
        <div class="form-group">
            <label for="fieldEmail" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-4">
                <input type="email" class="form-control" required id="fieldName" name="email">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-4">
                <button type="submit" class="btn btn-default">Register</button> 
            </div>
        </div>
    </form>
</div>
{{#section 'jquery'}}
<script>
    $(document).ready(function(){ 
        $('.signupform').on('submit', function(evt){
            evt.preventDefault();
            var action = $(this).attr('action');
            var $container = $(this).closest('.formContainer'); $.ajax({
                url: action,
                type: 'POST',
                success: function(data){
                    if(data.success){ $container.html('<h2>Thank you!</h2>');
                }else{
                    $container.html('There was a problem.');
                } 
            },
                error: function(){
                    $container.html('There was a problem.');
                }
            });
        }); 
    });
</script>
{{/section}}

How do I update my jQuery call to include the token ? Right now it is generating errors because the token is not included...

Answer 1

though it looks like it's a duplicate post still as far as answer is concerned this is how you should do check this SO post

and I am writing the code for you here

<script>
    $(document).ready(function(){ 
        $('.signupform').on('submit', function(evt){
            evt.preventDefault();
            var action = $(this).attr('action');
            var $container = $(this).closest('.formContainer'); 
            var token =  $('input[name="_csrf"]').attr('value')
        $.ajaxSetup({
            beforeSend: function(xhr) {
                xhr.setRequestHeader('Csrf-Token', token);
            }
        });
        $.ajax({
                url: action,
                type: 'POST',
                success: function(data){
                    if(data.success){ $container.html('<h2>Thank you!</h2>');
                }else{
                    $container.html('There was a problem.');
                } 
            },
                error: function(){
                    $container.html('There was a problem.');
                }
            });
        }); 
    });
</script>

Answer 2

Try this, you did not post anything in fact. I did not test it, if it fails, maybe you should collect data manually.

<script>
    $(document).ready(function(){ 
        $('.signupform').on('submit', function(evt){
            evt.preventDefault();
            var action = $(this).attr('action');
          + var payload = $(this).serializeArray()          
            var $container = $(this).closest('.formContainer'); $.ajax({
                url: action,
                type: 'POST',
          +     data: payload,
                success: function(data){
                    if(data.success){ $container.html('<h2>Thank you</h2>');
                }else{
                    $container.html('There was a problem.');
                } 
            },
                error: function(){
                    $container.html('There was a problem.');
                }
            });
        }); 
    });
</script>