在Laravel中使用ajax加载文本字段

时间:2016-01-22 08:47:23

标签: jquery ajax laravel-5.1 blade

我在从另一个选择字段中选择员工ID后,尝试在员工文本字段中加载员工姓名。

路线:

post('driver','SalaryController@driver');

控制器:

public function driver($eid)
{
    $driver = Employee::all()->where('eid',$eid)->pluck('name');
    return $driver;
}

刀片:

{!! Form::open(['action'=>'SalaryController@pay','method'=>'post','class'=>'form-horizontal']) !!}
<div class="col-md-12 d-section">
    <div class="col-md-6"> {{-- Left hand side --}}
        <div class="form-group"> {{-- Date --}}
            {!! Form::label('date','Date:',['class'=>'control-label col-sm-3']) !!}
            <div class="col-sm-9">
                {!! Form::text('date',null,['class'=>'form-control datetimepicker']) !!}
            </div>
        </div>
        <div class="form-group"> {{-- eid --}}
            {!! Form::label('eid','ID:',['class'=>'control-label col-sm-3']) !!}
            <div class="col-sm-9">
                {!! Form::select('eid',$repository->employees(),null,['class'=>'form-control','id'=>'eid']) !!}
            </div>
        </div>
    </div>
    <div class="col-md-6"> {{-- Right hand side --}}
        <div class="form-group"> {{-- Month --}}
            {!! Form::label('month','Month:',['class'=>'control-label col-sm-3']) !!}
            <div class="col-sm-9">
                {!! Form::select('month',$repository->months(),null,['class'=>'form-control']) !!}
            </div>
        </div>
        <div class="form-group"> {{-- name --}}
            {!! Form::label('name','Name:',['class'=>'control-label col-sm-3']) !!}
            <div class="col-sm-9">
                {!! Form::text('name',null,['class'=>'form-control','id'=>'name']) !!}
            </div>
        </div>
        <div class="form-group"> {{-- Paying --}}
            {!! Form::label('paid','Paying',['class'=>'control-label col-sm-3']) !!}
            <div class="col-sm-9">
                {!! Form::text('paid',null,['class'=>'form-control']) !!}
            </div>
        </div>
    </div>
</div>
<div class="col-md-12 d-section text-center">
    {!! Form::submit('PAY',['class'=>'btn btn-success','name'=>'advance']) !!}
    {!! Form::reset('RESET',['class'=>'btn btn-warning']) !!}
    <a href="{{ action('SalaryController@index') }}" role="button" class="btn btn-danger">CANCEL</a>
</div>
{!! Form::close() !!}

的Ajax:

<script>
    $(document).ready(function(){
        $('#eid').change(function(){
            var eid = $(this).val();
            var csrf = $('#csrf').val();
            var name = $('#name').val();
            $.ajax({
                URL : 'driver',
                data : {driver:eid,_token:csrf},
                type : 'post'
            }).done(function(e){
                name.html(e)
            })
        })
    })
</script>

代码无效。我用firebug进行了测试。选择员工ID后,它会显示以下错误

  

POST http://localhost/zamzam/advance 500内部服务器错误1.05s jquery.min.js(第5行)

修改

以下是来自 storage \ log \ laravel.log

的错误日志
[2016-01-22 12:36:56] local.ERROR: exception 'Illuminate\Session\TokenMismatchException' in D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\VerifyCsrfToken.php:53
Stack trace:
#0 [internal function]: Illuminate\Foundation\Http\Middleware\VerifyCsrfToken->handle(Object(Illuminate\Http\Request), Object(Closure))
#1 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(124): call_user_func_array(Array, Array)
#2 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\View\Middleware\ShareErrorsFromSession.php(54): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#3 [internal function]: Illuminate\View\Middleware\ShareErrorsFromSession->handle(Object(Illuminate\Http\Request), Object(Closure))
#4 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(124): call_user_func_array(Array, Array)
#5 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Session\Middleware\StartSession.php(62): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#6 [internal function]: Illuminate\Session\Middleware\StartSession->handle(Object(Illuminate\Http\Request), Object(Closure))
#7 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(124): call_user_func_array(Array, Array)
#8 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse.php(37): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#9 [internal function]: Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse->handle(Object(Illuminate\Http\Request), Object(Closure))
#10 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(124): call_user_func_array(Array, Array)
#11 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Cookie\Middleware\EncryptCookies.php(59): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#12 [internal function]: Illuminate\Cookie\Middleware\EncryptCookies->handle(Object(Illuminate\Http\Request), Object(Closure))
#13 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(124): call_user_func_array(Array, Array)
#14 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode.php(42): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#15 [internal function]: Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode->handle(Object(Illuminate\Http\Request), Object(Closure))
#16 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(124): call_user_func_array(Array, Array)
#17 [internal function]: Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#18 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(103): call_user_func(Object(Closure), Object(Illuminate\Http\Request))
#19 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php(122): Illuminate\Pipeline\Pipeline->then(Object(Closure))
#20 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php(87): Illuminate\Foundation\Http\Kernel->sendRequestThroughRouter(Object(Illuminate\Http\Request))
#21 D:\xampp\htdocs\zamzam\index.php(54): Illuminate\Foundation\Http\Kernel->handle(Object(Illuminate\Http\Request))
#22 {main}  

1 个答案:

答案 0 :(得分:0)

最后我解决了。我的代码中有很多错误。试图列出它们并逐一描述。它可能在将来帮助其他人。

<强>错误:

  1. _token mismatch exception
  2. 在控制器中使用错误的参数
  3. 错误的ajax代码
  4. <强> 1。 _token不匹配异常:因为我在html表单中使用Laravel Blade模板,所以默认情况下我有_token字段。但它没有idclass。因此,我自己添加了_token字段,id名为token

    <input type="hidden" name="_token" value="{{ csrf_token() }}" id="token"/>
    

    它保留了原始版本,它们都具有相同的值。

    <强> 2。在控制器中使用错误的参数:我试图使用$eid作为参数。我应该使用Request facade和$request服务容器将当前http请求的实例注入控制器的方法。我需要在方法中注入employee id(eid),所以我将控制器代码更改为

    public function driver(Request $request)
    {
        $eid = $request->get('eid'); //get the value of eid from "data : {eid:eid,_token:csrf},"
        $driver = Employee::all()->where('eid',$eid)->pluck('name');
        return $driver;
    }
    

    第3。错误的ajax代码:我通过middlware传递token值,获取值eid(员工ID),现在需要在名称字段中显示员工姓名。使用ajax成功连接到数据库后,只需一个简单的jquery代码即可在文本字段中显示值。这是我的ajax代码:

    $(document).ready(function(){
        $('#eid').change(function(){
            var eid = $(this).val();
            var csrf = $('#token').val();
            $.ajax({
                url : 'driver',
                data : {eid:eid,_token:csrf},
                type : 'post'
            }).success(function(e){
                $('#name').val(e)
            })
        })
    })
    

    路线保持原样

    post('driver','SalaryController@driver');