在laravel MVC中更新视图而无需重新加载

Question

我在项目中使用Laravel 5.4，并且制作了一个简单的仪表板，其中包含一些图表，这些图表可以显示mySql数据库中的信息。

我放置了一些下拉列表作为过滤器，以便用户可以按自己的意愿过滤仪表板。我将下拉列表放入一个表单中，然后使用get方法和bootstrap-select在没有ajax的情况下从控制器中填充它们。

这是我的代码，如下所示：

       <form id="filter"  method="GET">

                {{ csrf_field() }}

                <select class="selectpicker "  name="siteF" id="siteF" data-width="100px" data-actions-box="true" data-style="btn-warning" title="Site">
                        <option>All</option>
                        @foreach($SiteFilter as $site)
                        <option>{{ $site->site_name }}</option>
                        @endforeach
                </select>

                <select class="selectpicker "  name="yearF" id="yearF" data-size="5" data-width="100px" data-actions-box="true" data-style="btn-warning" title="Year">
                    <option>All</option>
                    @foreach($YearFilter as $year)
                        <option>{{ $year->year }}</option>
                    @endforeach

                </select>

                <select class="selectpicker "  name="operatorF" id="operatorF" data-size="5" data-width="100px" data-actions-box="true" data-style="btn-warning" title="Operator">
                    <option>All</option>
                    @foreach($OperatorFilter as $operator)
                        <option>{{ $operator->operator }}</option>
                    @endforeach
                </select>

                <select class="selectpicker "  name="parkingF" id="parkingF" data-width="100px" data-actions-box="true" data-style="btn-warning" title="Parking">
                    <option>All</option>
                    @foreach($ParkingFilter as $parking)
                        <option>{{ $parking->parking }}</option>
                    @endforeach
                </select>



                <button type="submit"  class="btn bg-deep-orange waves-effect">
                    <i class="material-icons">search</i>

                </button>
            </form>

这是控制器中我要填充列表的部分：

    //----------------------------------- 1/ filter of sites-----------------------------------

    $SiteFilter=  DB::table('transactions')
        ->select('site_name')
        ->distinct()
        ->get();

    //-----------------------------------end of filter of sites-----------------------------------

    //----------------------------------- 2/ filter of years-----------------------------------

    $YearFilter=  DB::table('transactions')
        ->select(DB::raw("YEAR(transaction_created_at) as year"))
        ->distinct()
        ->get();

    //-----------------------------------end of filter of years-----------------------------------

    //----------------------------------- 3/ filter of operators-----------------------------------

    $OperatorFilter=  DB::table('transactions')
        ->select('operator_id as operator')
        ->distinct()
        ->get();

    //-----------------------------------end of filter of operators-----------------------------------

    //----------------------------------- 4/ filter of parkings-----------------------------------

    $ParkingFilter=  DB::table('transactions')
        ->select('parking')
        ->distinct()
        ->get();

    //-----------------------------------end of filter of parkings-----------------------------------

这是图表的示例：

      //-----------------------------------Donutchart: number of transactions per operator-----------------------------------
    $donutData=  DB::table('transactions')
        ->select('operator_id as operator',DB::raw('count(id) as num'))
        ->where(function ($query) {

            if((Input::get('operatorF') != "")&&(Input::get('operatorF') != "All"))
                $query->where('operator_id','=',Input::get('operatorF') );

            if((Input::get('parkingF') != "")&&(Input::get('parkingF') != "All"))
                $query->where('parking','=',Input::get('parkingF') );

            if((Input::get('yearF') != "")&&(Input::get('yearF') != "All"))
                $query->where('transaction_created_at', '>=',(string)Input::get('yearF'));

            if((Input::get('siteF') != "")&&(Input::get('siteF') != "All"))
                $query->where('site_name','=',Input::get('siteF') );

        })
        ->groupby('operator')
        ->orderby('operator')
        ->get();

    $donut_data='[';
    foreach($donutData as $rec)
    {
        $donut_data=$donut_data.'{"label":'.$rec->operator.',"value":'.$rec->num.'},';

    }
    $x=strlen($donut_data);
    $donut_data[$x-1]=']';
    //-----------------------------------end of Donutchart: number of transactions per operator-----------------------------------

将此代码返回的响应发送到javascript以制作甜甜圈图。

所以我的问题是，在重新加载页面时，我应该怎么做才能使用过滤器，而实际上不会在刷新状态下刷新仪表板页面，所以我松散了下拉过滤器的最后选择，因此我无法区分哪个过滤器和值他曾经。而且我不知道如何在我的项目中实现Ajax。有帮助吗？

先谢谢您。