Laravel中控制器传数据至视图（含AJAX）时遇undefined variable问题及修复

我最近在Laravel框架里用AJAX实现控制器到视图的数据传递时，踩了个坑——前端一直报undefined variable的错误。折腾了好一会儿终于找到问题根源并解决了，把修正后的完整代码和思路整理出来，给碰到同样问题的朋友参考：

问题根源 #

之前我错误地在控制器里直接返回视图（return view(...)），但AJAX请求需要的是JSON格式的数据响应，而不是渲染后的视图内容，这就导致前端根本拿不到预期的变量，从而报错。

解决后的完整代码 #

1. 前端AJAX函数（jQuery版） #

$(document).ready(function() {
    // 绑定按钮点击事件触发AJAX请求
    $('#get-data-btn').click(function(e) {
        e.preventDefault();
        
        $.ajax({
            url: '{{ route("data.fetch") }}', // 使用路由命名更可靠
            type: 'GET',
            dataType: 'json', // 明确指定接收JSON格式
            success: function(response) {
                // 成功接收数据后渲染到页面
                if (response.success) {
                    const container = $('#data-display');
                    container.empty();
                    
                    // 遍历数据生成DOM元素
                    $.each(response.data, function(idx, item) {
                        container.append(`<div class="data-item">${item.title}</div>`);
                    });
                } else {
                    alert('数据加载失败，请重试');
                }
            },
            error: function(xhr, status, err) {
                console.log('AJAX请求出错:', err);
            }
        });
    });
});

提示：如果用原生JS或者Axios，核心逻辑一致——发送请求，接收JSON响应，然后处理数据。

2. Laravel路由（routes/web.php） #

use App\Http\Controllers\DataController;

// 定义GET请求路由，指向控制器的fetchData方法
Route::get('/get-data', [DataController::class, 'fetchData'])->name('data.fetch');

用路由命名的好处是后续修改URL时，不用逐个修改前端AJAX里的地址，更易维护。

3. 控制器代码（app/Http/Controllers/DataController.php） #

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Article; // 替换成你实际使用的模型

class DataController extends Controller
{
    public function fetchData(Request $request)
    {
        // 从数据库获取需要传递的数据
        $articles = Article::latest()->take(5)->get();
        
        // 以JSON格式返回结构化响应
        return response()->json([
            'success' => true,
            'data' => $articles // 这里的data就是前端要接收的数据集
        ]);
        
        // ❌ 之前错误的写法：直接返回视图，AJAX无法解析
        // return view('articles.list', ['articles' => $articles]);
    }
}

关键要点：控制器必须返回response()->json()包裹的结构化数据，而不是视图。前端通过response.data就能访问到控制器传递过来的变量，不会再出现未定义的问题。

额外注意事项 #

• 如果是POST请求，一定要在AJAX请求里带上CSRF令牌：data: { _token: '{{ csrf_token() }}' }
• 可以打开浏览器的Network面板，查看AJAX请求的响应内容，确认数据是否正确返回
• 确保前端已经正确引入jQuery（如果用的是jQuery AJAX）

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