如何从Laravel控制器取值并赋值到public目录下的JavaScript文件？

嘿，这个问题我太熟悉了！因为Public目录下的JS是静态资源，没法直接读取PHP变量，所以得通过页面作为中间层传递。这里有两种最常用的方案，你可以根据自己的场景选：

方案一：全局变量注入（简单直接） #

这种方法是在Blade模板里把后端变量暴露成浏览器全局变量，然后静态JS文件直接调用：

1. 在你的Blade视图文件里，在引入Public目录的JS文件之前，添加一段脚本输出变量：

<!-- 在Blade视图的<head>或者页面底部，引入目标JS之前 -->
<script>
    // 把控制器的$update_tugas_id赋值给全局变量
    window.updateTugasId = {{ $update_tugas_id }};
    // 如果变量是字符串类型，记得加引号：window.updateTugasId = "{{ $update_tugas_id }}";
</script>

2. 修改Public目录下的JavaScript代码，用全局变量替换硬编码的数字：

// 原来的代码：var optionS = $('#name_3').html();
var optionS = $(`#name_${window.updateTugasId}`).html();
// 兼容旧浏览器的写法：var optionS = $('#name_' + window.updateTugasId).html();

方案二：通过HTML Data属性传递（更优雅，避免全局污染） #

如果不想污染全局作用域，推荐用HTML的data属性来传递变量：

1. 在Blade视图的某个父元素（比如或者相关的容器标签）上添加data属性：

<body data-tugas-id="{{ $update_tugas_id }}">
<!-- 或者绑定到特定业务容器 -->
<div class="tugas-wrapper" data-tugas-id="{{ $update_tugas_id }}">

2. 在Public的JS文件里获取这个data属性的值，再替换到选择器里：

// 原生JS方式获取
var tugasId = document.body.dataset.tugasId;
// 或者jQuery方式获取：var tugasId = $('body').data('tugas-id');

// 替换选择器
var optionS = $(`#name_${tugasId}`).html();

关键注意点 #

• 务必保证变量在静态JS文件加载之前就被注入到页面中，否则JS会读取到undefined
• 如果$update_tugas_id是字符串类型，记得在Blade里给变量加引号包裹，避免语法错误

内容的提问来源于stack exchange，提问作者hendraspt