将 Laravel 路由参数传递给 JavaScript

Posted 2023-03-14

【中文标题】将 Laravel 路由参数传递给 JavaScript

【英文标题】：Passing Laravel Route Parameter to JavaScript

【发布时间】：2019-03-03 08:46:47

【问题描述】：

我在 Laravel 中使用服务器端数据表（具体来说是Yajra）。

我设置了一个路由，它可以拉取所有资产并作为数据表返回，但我需要的是拉取所有 school_id 等于 URL 中参数的资产。

所以我的应用程序应该是这样的：

用户登陆 /schools/school_id/assets .例如schools/1/assets Datatables 使用该 school_id 提取所有学校的资产

到目前为止，我在脚本中使用了以下内容：

$(function() 
    $('#assets-table').DataTable(
        processing: true,
        serverSide: true,
        ajax: '/api/assets',
        columns: [
            data: 'asset_tag', name: 'assets.asset_tag',
            data: 'name', name: 'assets.name',
        ]
    );
);

在 URL 中获取该 ID 并将其传递给该 ajax 请求的最佳方法是什么？

【参考方案1】：

这个答案将反映我用来结构化所有文件的方法，不要将blade 文件与js 混合。

在您的控制器中，您将拥有school_id。你可以简单地将它传递给刀片：

return view('...')->with([
  'school_id' => $school_id
]);

创建一个简单的input 字段以获取数据。

<input type="hidden" data-fetch-route=" route('name_of_route', ['school_id' => $school_id]) " id="schoolFetch">

在.js 文件中，您可以拥有：

$(function() 
 $('#assets-table').DataTable(
    processing: true,
    serverSide: true,
    ajax: $("#schoolFetch").attr('data-fetch-route'),
    columns: [
        data: 'asset_tag', name: 'assets.asset_tag',
        data: 'name', name: 'assets.name',
    ]
);

如您所见，您将拥有route('name_of_route', ['school_id' => $school_id])，这意味着您需要在路由name_of_route 处接受一个参数

如果您想更深入、更简洁，可以创建一个名为 utilities.js 的文件，该文件将包含您可以在整个应用程序中使用的所有功能：

window.getRoute = function($element, action)
  return $element.attr('data-' + action + '-route');

和

ajax: $("#schoolFetch").attr('data-fetch-route'),

会变成

ajax: getRoute($("#schoolFetch"), 'fetch'),

【参考方案2】：

$(function() 
    $('#assets-table').DataTable(
        processing: true,
        serverSide: true,
        ajax:  route('name.your.route.here') ,
        columns: [
            data: 'asset_tag', name: 'assets.asset_tag',
            data: 'name', name: 'assets.name',
        ]
    );
);