如何將csrf令牌添加到jQuery調用中？

Question

我的服務器生成一個csrfToken，將其插入以下元素：

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

{{_csrfToken}}用於模板化，但在運行時會在服務器上用實際的令牌替換。

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

如何更新jQuery調用以包含令牌？ 現在它正在生成錯誤，因為不包含令牌...

Answer 1

試試這個，您實際上沒有發布任何內容。 我沒有測試它，如果失敗了，也許您應該手動收集數據。

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

Answer 2

雖然看起來還是重復的帖子，但就答案而言，這是您應該如何檢查此帖子

我在這里為你編寫代碼

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