javascript - 在 laravel mvc 中更新视图而不重新加载

Question

我在我的项目中使用 Laravel 5.4，我正在制作一个简单的仪表板，其中包含一些显示来自 mySql 数据库的信息的图表。

我将一些下拉列表作为过滤器，以便用户可以根据需要过滤仪表板。我将下拉列表放在一个表单中，然后我从没有 ajax 的控制器中填充它们，只需使用 get 方法和 bootstrap-select。

这是我的代码的样子：

       <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。有什么帮助吗？

先感谢您..

标签： javascriptphplaravellaravel-5.4bootstrap-select