vimeo 视频通过 ajax 和 jquery 完成时将课程状态记录到 db

Question

我正在尝试在 vimeo 视频完成时将数据记录到我的数据库中，以最终跟踪学生/员工在课程中的时间，并确定他们何时完成课程。当谈到 js 和 ajax 时，我迷路了。以下是我到目前为止所尝试的。我正在使用 laravel 5.6。

如果有人能指出我正确的方向，那将大有帮助。

    @extends('layouts.app')

@section('page-title', trans('app.dashboard'))
@section('page-heading', trans('app.dashboard'))

@section('breadcrumbs')
<li class="breadcrumb-item active">
    @lang('Companies')
</li>
@stop

@section('content')

@include('partials.toastr')
<div class ="row justify-content-md-center">
    <div class='col-lg-6 '>

        <iframe id="display" style="width:100%; height:360px;overflow:auto;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>


    </div>

</div>
<div class = "row">

    <div class="col-lg-8 col-md-12">
    <h2>Course Lessons</h2>  
    @include('courses.partials.lessons')
    </div>

    @permission('online.instructor.menu')
    <div class="col-lg-4 col-md-12">

        @include('courses.partials.instructor_menu')

    </div>


    <div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Add New Lesson</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body mx-3">
                {!! Form::open(['route' => 'lesson.store', 'id' => 'lesson-form']) !!} 
                <div class="md-form mb-5">
                    <i class="fa fa-compass prefix grey-text"></i>
                    <input type="hidden" id="course_id" name="course_id" class="form-control validate" value="{{$course->id}}">

                </div>

                <div class="md-form mb-5">
                    <i class="fa fa-compass prefix grey-text"></i>
                    <input type="text" id="title" name="title" class="form-control validate">
                    <label data-error="wrong" data-success="right" for="title">Lesson Title</label>
                </div>

                <div class="md-form mb-5">
                    <i class="fa fa-sort prefix grey-text"></i>
                    <input type="text" id="order" name="order" class="form-control validate">
                    <label data-error="order" data-success="order" for="title">Number order to diplay.</label>
                </div>

                <div class="md-form mb-5">
                    <i class="fa fa-film prefix grey-text"></i>
                    <input type="text" id="content" name="content" class="form-control validate">
                    <label data-error="wrong" data-success="right" for="title">Lesson Content</label>
                </div>

            </div>
            <div class="modal-footer d-flex justify-content-center">
                <button class="btn btn-primary">Add Lesson</button>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>

    @endpermission




</div>

@stop

@section('styles')

@stop

@section('scripts')

<script>


    function onFinish() {
        status.text('finished');

            $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).ready(function(){
        $('#form').submit(function (e) {
            e.preventDefault(); //**** to prevent normal form submission and page reload

            $.ajax({
                type : 'POST',
                url : '{{route('lesson.completed')}}',
                data : {
                    lesson: val({{$lesson->id}}),
                    user: val({{$auth->user-id}}),
                    time: val({{date('Y-m-d h:i:s')}})
                },
                success: function(result){
                    console.log(result);
                    $('#head').text(result.status);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    //alert(xhr.status);
                    //alert(thrownError);
                }
            });
        });
    });
    }

});
</script>

@stop

Answer 1

我的 js 似乎有错误，我重写了函数，现在它可以工作了。

<script>
        $(function() {
            var iframe = $('#display')[0];
            var player = $f(iframe);
            var lesson_id='';
            var lesson_complate_id='';
            // When the player is ready, add listeners for pause, finish, and playProgress
            player.addEvent('ready', function() {
                player.addEvent('pause', onPause);
                player.addEvent('finish', onFinish);
                player.addEvent('playProgress', onPlayProgress);
            });
            $('button').bind('click', function() {
                lesson_id=$(this).data('id');
            });
            function onFinish() {
                console.log('finished');
                $.ajaxSetup({
                    headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                      'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                $.ajax({
                    url: '{{route('lesson.complete')}}',
                    method: 'POST',
                    data:  {
                        lesson: lesson_id,
                        user: {{Auth::user()->id}},
                        course: {{$course->id}},

                    },
                    success: function(res){
                        lesson_complate_id ="#lesson_complate_id"+lesson_id;
                        $(lesson_complate_id).attr('class', 'badge badge-success');
                        $(lesson_complate_id).text('Completed')
                    }
                });
            }

    </script>