如何在 Laravel 中生成具有占位符/可替换值的路由，以便在运行时在 JS 中使用？

Posted 2023-03-14

【中文标题】如何在 Laravel 中生成具有占位符/可替换值的路由，以便在运行时在 JS 中使用？

【英文标题】：How can I generate a route in Laravel with a placeholder/replaceable value for use in JS at runtime?

【发布时间】：2018-05-11 14:27:44

【问题描述】：

我有一个以 JSON 格式返回帖子数据的路由：

Route::get('posts/post/data', 'PostController@getData')->name('data.post');

前面是JS调用的：

<a href="#" data-post-id=" $post->id " class="post-links"> $post->title </a>

点击是这样绑定的：

$(".post-links").click(function() 
    var postId = $(this).data('post-id');
    $.get( " route('data.post') " + postId, function(data) 
        // process the data...
    );
);

这里的问题是 get 的 URL 必须根据点击的链接在前端生成，但是 Laravel 在渲染视图时已经处理了 route 方法。如果没有id 参数，路由生成将失败。如何获取带参数的路由库？

【问题讨论】：

你知道你的 URL 将如何呈现像这样posts/1/data，你必须手动输入你的 ajax 请求而不是等待 laravel 为你生成它，然后你可以更改您从链接的 data-post-id 属性获得的 ID，

@yvesdaxmaz 这违背了使用动态路由生成的目的。如果我稍后将 URL 路由更改为 /articles/approved/1/data，那么我将不得不在我使用它的任何地方更改 JS 文件中的路径。

当您触发点击事件时，您的视图会被渲染，您必须找到相同的方法来获取将处理您的 ajax 请求的 url，并且该 URL 需要一个已经在您的 html 中的 ID由 laravel 生成。当您生成 HTML 时，您在应用程序的客户端中，在这种情况下，您正是在您的浏览器中，并且当呈现视图时，laravel 生成新路由的唯一方式是只有当他将获得新的处理程序请求时，这就是您必须手动生成网址的原因

@yvesdaxmaz 什么？

因为 laravel 在渲染你 view template 时已经处理了 'route' 方法，所以在你前面你的 javascript 代码中会有 $.get("http://..../posts/????/data) 并且你的目标是自动更改该 url 中的 ID点击相同的链接后。您必须在点击事件触发时执行的代码中更改该 url $.get("this url")。为此，您必须从 data-post-id 属性中获取 ID 并将其放在您的 URL 中，这不能由 laravel 完成，因为视图已经呈现

【参考方案1】：

在 Js 中你可以做这样的事情。

var postId = $(this).data('post-id');
var url = " route('data.post', ':url') ";
url = url.replace(':url', postId);

用于多个通配符

 var postId = $(this).data('post-id');
 var anotherId = 1;
 var url = " route('test', [':url',':url1']) ";
 url = url.replace(':url', postId);
 url = url.replace(':url1', anotherId);

希望对你有所帮助。

【讨论】：

这不是一个坏技巧。我现在会接受这个，但我会继续寻找更多的解决方案。谢谢！

【参考方案2】：

这是另一种较少依赖前端代码的方式：

将路由参数设置为可选：

Route::get('data/posts/post?', 'DataController@post')
    ->name('data.posts);

现在，您可以轻松调用基础路由并在 JS 中附加 id：

$(".post-links").click(function() 
    var postId = $(this).data('post-id');
    $.get( " route('data.posts') /" + postId, function(data) 
        // process the data...
    );
);

比替换字符串更简洁！

这确实有一些陷阱需要避免，即可选参数使/data/posts 之类的路由成为有效路由，因此您只需处理该异常，以防帖子为null。

我相信这是一个更好的解决方案，所以我会将此作为正确答案，但我也喜欢其他解决方案。

更新：考虑到最初的问题，即关于占位符或可替换值的问题，另一个答案实际上是正确的。我自己的这个答案是使用占位符的替代方法，所以我会将另一个答案标记为正确的答案。

【讨论】：

这不适用于路由之间的通配符。但如果您的要求得到满足，它很好..:)

@Rohitshah 是的，如果通配符在路线的中间，那么你的方法就是要走的路。