如何在JavaScript/jQuery中获取Laravel控制器传递的数据？

先排查基础问题 #

• 确认控制器中已正确传递变量：检查FruitsController.php的displayFruits方法，确保返回视图时已把$fruits传入，比如：

  return view('auth.user_settings', compact('fruits'));
  

  或者：

  return view('auth.user_settings')->with('fruits', $fruits);
  

  同时确认变量名拼写一致（比如是$fruits而非$fruit）。
• 在user_settings.blade.php中临时添加{{ dd($fruits) }}，验证变量确实能正常输出数组，排除控制器未传值的问题。

可行解决方法 #

方法1：全局暴露变量（确保加载顺序正确）

在user_settings.blade.php中，在引入dropdown.js之前添加脚本，将变量挂载到全局window对象：

<script>
    window.fruits = @json($fruits);
</script>
<script src="{{ asset('js/dropdown.js') }}"></script>

之后在dropdown.js中直接通过window.fruits或fruits访问数据即可。

方法2：使用HTML数据属性传递（推荐，避免全局污染）

在视图的某个元素上添加data-*属性存储数据：

<div id="fruits-data" data-fruits="@json($fruits)"></div>

然后在dropdown.js中读取该属性：

// 原生JS
const fruitsData = document.getElementById('fruits-data');
const fruits = JSON.parse(fruitsData.dataset.fruits);

// jQuery写法
const fruits = $('#fruits-data').data('fruits');

常见错误排查 #

• 若@json($fruits)报错“变量未定义”：检查视图是否为子视图（使用@extends），确保父视图的@yield区域能继承到变量，或控制器直接返回的是该子视图而非父视图。
• 若外部JS仍拿不到数据：确认暴露变量的脚本在dropdown.js之前加载，否则JS执行时变量还未定义。

优化建议 #

• 避免零散的全局变量，可将多个后端传递的数据打包成一个全局对象：

  <script>
      window.appData = {
          fruits: @json($fruits),
          // 其他需要传递的变量
      };
  </script>
  

• 对于复杂场景，可考虑通过API接口异步获取数据，减少前后端耦合。

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