Laravel中如何将PHP变量以数组形式传递给JavaScript？

我经常碰到开发者遇到这类问题——后端把数据库查询结果传给前端后，JS里拿到的不是预期的可用数组。其实核心问题大多出在数据序列化和前端解析这两个环节，下面一步步给你解决：

第一步：后端正确序列化查询结果 #

不管你用什么后端框架，关键是要把数据库返回的集合/数组，转成标准的JSON字符串，而不是直接传递后端语言的原生对象（比如PHP数组、Python字典）。

举几个常用框架的正确做法：

• Laravel：如果是Eloquent集合，直接用->toJson()，或者在返回视图时用json_encode()处理：

  // 控制器代码
  $dbResults = DB::table('your_table')->get();
  return view('your_page', ['serializedData' => json_encode($dbResults)]);
  

  更方便的是用Laravel自带的@json()指令，后面前端部分会提到。
• PHP原生：用json_encode()把查询到的关联数组转成JSON：

  $query = mysqli_query($conn, "SELECT * FROM your_table");
  $resultArray = mysqli_fetch_all($query, MYSQLI_ASSOC);
  $jsonData = json_encode($resultArray);
  // 把$jsonData传给视图
  

• Django：先把QuerySet转成可序列化的列表，再用json.dumps()处理：

  from django.core import serializers
  import json
  
  query_results = YourModel.objects.all().values()
  json_data = json.dumps(list(query_results))
  return render(request, 'your_template.html', {'serializedData': json_data})
  

第二步：前端正确接收并解析 #

后端传过来的JSON字符串，前端需要把它解析成JavaScript数组，不能直接当作字符串使用。

常见错误写法（别踩坑）： #

<script>
// 这样拿到的是字符串，不是数组，遍历会出问题
const myArray = {{ serializedData }};
</script>

正确写法分两种情况： #

1. 手动解析JSON：
   先确保后端传的是JSON字符串，然后用JSON.parse()解析：

   <script>
   // 用单引号包裹，避免JSON里的双引号导致语法错误
   const rawJson = '{{ serializedData }}';
   const myArray = JSON.parse(rawJson);
   // 现在myArray就是可用的JS数组了，比如遍历它
   myArray.forEach(item => {
     console.log(item.id, item.name);
   });
   </script>
   

2. 框架自带的快捷方式：
   像Laravel的@json()指令，会自动帮你完成序列化和引号转义，直接拿到JS数组：

   <script>
   const myArray = @json($dbResults);
   // 直接用，不需要手动解析
   </script>
   

排查小技巧 #

• 后端先打印序列化后的结果，检查是否是合法的JSON格式（比如键名都是双引号，数组结构正确，没有语法错误）
• 前端打开控制台，用console.log(myArray)查看实际拿到的内容：如果是字符串，说明没解析；如果是null或者报错，说明JSON格式有问题
• 注意特殊字符：如果查询结果里有换行、引号这类字符，后端的json_encode()/json.dumps()会自动转义，别手动拼接字符串，否则容易破坏JSON结构

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