在Laravel 5中使用Ajax

3

这是我的ajax代码:

$('select[id=currency-data]').change(function () {

    var currency_id =   $(this).val();

    $.ajax({
        url: "{{Route('exchange-rate')}}",
        type: 'POST',
        data: {currency_id: currency_id },
        success: function(data){
            $('#ex-rate').val(data);
        }
    });
});

查看:

        {!! Form::label('currency_id', 'Currency:', ['class' => 'control-label']) !!}
        {!! Form::Select('currency_id', $currency_data, Input::old('currency_id'), ['id'=>'currency-data','class' => 'form-control','required']) !!}

        {!! Form::label('exchange_rate', 'Exchange Rate:', ['class' => 'control-label']) !!}
        {!! Form::input('number','exchange_rate', Input::old('exchange_rate'), ['id'=>'ex-rate','class' => 'form-control','readonly','required']) !!}

当我运行这个程序时,出现了错误:VerifyCsrfToken.php中的TokenMismatchException。请问有人能提供解决方案吗?
3个回答

1

嗨,如果您将js文件和视图文件分开,并且想要使用ajax提交表单,则可以在视图中为任何HTML标签使用数据属性来添加csrf令牌,如下所示。

<div id="toke" data-token="{!! csrf_token() !!}"></div>

现在您可以在js文件中访问令牌。
$.ajax({
    url: "{{Route('exchange-rate')}}",
    type: 'POST',
    data: data: {_token: $('#token').data('token'),currency_id: currency_id },
    success: function(data){
        $('#ex-rate').val(data);
    }
 });
});

第二种选择是创建隐藏的输入元素,并使用jQuery表单序列化来获取表单数据。
<form id="form-data" action="url" method = 'POST' />    
{!! csrf_field() !!}

{!! Form::label('currency_id', 'Currency:', ['class' => 'control-label']) !!}
{!! Form::Select('currency_id', $currency_data, Input::old('currency_id'), ['id'=>'currency-data','class' => 'form-control','required']) !!}

{!! Form::label('exchange_rate', 'Exchange Rate:', ['class' => 'control-label']) !!}
{!! Form::input('number','exchange_rate', Input::old('exchange_rate'), ['id'=>'ex-rate','class' => 'form-control','readonly','required']) !!}

jQuery

var form = $("#form-data");
$.ajax({
        url: form.attr( 'action' ),
        type: 'POST',
        data: form.serialize(),
        success: function(data){
            $('#ex-rate').val(data);
        }
     });
});

1
在您的 Blade 文件中的 <head> 标签中添加以下内容。
<meta name="csrf-token" content="{{ csrf_token() }}">

在您的JavaScript中,在jQuery库之后调用以下代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
});
</script>

0

更改
data: {currency_id: currency_id },

 data: data: {_token: '{!! csrf_token() !!}',currency_id: currency_id },

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接