javascript - 如何将 csrf token 添加到 jQuery 调用中？

Question

我的服务器生成一个 csrfToken，将其插入到以下元素中:

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

{{_csrfToken}} 用于模板化，但在运行时会在服务器上替换为实际 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}}

如何更新我的 jQuery 调用以包含 token ？现在它正在生成错误，因为不包含 token ...

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>