如何在Laravel Blade中将ID传递给JQuery URL

时间:2019-04-16 21:11:47

标签: jquery ajax laravel

我有一个js文件,可生成chartjs图表。我希望图表使用'id'动态提取数据。

这是Laravel Blade中的代码:

<div class="card">                      
  <canvas id="dash-donut-rice" width="100%" height="100%"></canvas>
  <script src="{{url( 'vendor/dash-donut.js' )}}"></script>
</div>

这是路线:

Route::get('/get-donut/{id}', 'DashboardController@getDonut');

这是控制器:

public function getDonut($id)
    {
        //dd($id);
        $new = PurchaseOrder::where('status', 'NEW')->where('bu_id', $id)->count();
        $completed = PurchaseOrder::where('status', 'COMPLETED')->where('bu_id', $id)->count();
        $cancelled = PurchaseOrder::where('status', 'CANCELLED')->where('bu_id', $id)->count();

        $total = PurchaseOrder::where('bu_id', $id)->count();
        //$center_text = ($completed / $total) * 100 . '%';
        if ($total == 0) {
            $center_text = '0%';
        } else {
            $center_text = number_format(($completed / $total) * 100, 0) . '%';
        }

        $donut_data_array = array(
            'count' => [$cancelled, $new, $completed],
            'center_text' => $center_text,
        );

        return $donut_data_array;
    }

这是ChartJS函数:

ajaxGetPostMonthlyData: function () {
            //var urlPath =  'http://' + window.location.hostname + '/get-post-chart-data';
            //var urlPath =  'http://nipayandtuazon.com/get-rice-donut';
            //var urlPath =  'http://nipayandtuazon.com/get-rice-donut';
            var request = $.ajax( {
                method: 'GET',
                url: '/get-donut/1',
        } );

https://imgur.com/a/R4oos6V

谢谢!

1 个答案:

答案 0 :(得分:0)

ajaxGetPostMonthlyData: function () {
        //var urlPath =  'http://' + window.location.hostname + '/get-post-chart-data';
        //var urlPath =  'http://nipayandtuazon.com/get-rice-donut';
        //var urlPath =  'http://nipayandtuazon.com/get-rice-donut';
        var request = $.ajax( {
            method: 'GET',
            url: '/get-donut/{{$id}}',
    } );

现在,您可以动态传递$ id上的任何内容。如果从客户端进行操作,则需要传递一个变量。例如,您可以通过id获取元素并获取其值,然后将其放在此处。不确定是要使用输入框还是从服务器端在前端实现此目标。