如何将Laravel Blade视图转为字符串用于fetch函数？

AI 小北

2026-7-4

解决Laravel Blade视图渲染后fetch JSON解析错误的问题

错误根源

你的Blade视图文件/views/flight/show-data.blade.php中使用了@dd($data)指令，这个指令会直接输出调试内容并终止PHP脚本执行，导致控制器无法返回完整的JSON响应，前端收到的内容不是合法的JSON格式，因此触发SyntaxError。

修复步骤

1. 移除视图中的@dd指令并修正判断逻辑

修改show-data.blade.php，删除@dd($data)，同时修正数据判断的逻辑（原代码count($data)统计的是整个结果数组的元素数，应该针对实际数据集合判断）：

<div class="my-3">
  @if (count($data['data']))
    <div class="fw-bold">found some data</div>
  @else
    <p>no data.</p>
  @endif
</div>

2. 控制器中规范返回JSON响应

Laravel返回数组会自动转JSON，但明确使用response()->json()更严谨，避免潜在的格式问题：

function fetchData()
{
  $result['data'] = [
    0 => [ 'name' => 'andre' ],
  ];
  $result['message'] = 'hello world';
  // 渲染视图并传递数据
  $result['view'] = view('flight.show-data', ['data' => $result])->render();

  // 明确返回JSON格式响应
  return response()->json($result);
}

3. 前端正确处理返回的HTML

在fetch的回调中，将渲染好的视图HTML插入到页面容器：

fetch(url)
    .then((response) => response.json() )
    .then((res) => {
        console.log('res', res);
        // 把后端返回的渲染好的HTML插入到目标容器
        mainContentDiv.innerHTML = res.view;
    })
    .catch(err => {
        console.error('error', err);
    });