Laravel中jQuery AJAX提交路由与普通Form提交路由行为差异问题：视图无法接收控制器传递变量

咱们先把问题根因说透，核心在于两种提交方式的本质差异：

为什么会出现差异？ #

1. 普通表单提交是整页刷新模式
   当你用普通表单提交时，浏览器会发送POST请求，直接接收控制器返回的完整视图页面并替换当前页面。此时控制器里的return view('CV_Test.excel',compact('like_values'))会把like_values变量传递给新渲染的视图，所以页面上的@if(isset($like_values))能正常触发，渲染出复选框列表。

2. AJAX是异步无刷新请求
   AJAX是在后台悄悄发送请求，浏览器不会自动刷新页面或替换当前视图。你当前的代码存在两个关键问题：

• 控制器返回的是HTML视图，但AJAX没有对这个响应做任何处理，当前页面还是原来的版本，自然找不到$like_values变量；
• 你设置了dataType: 'JSON'，但控制器返回的是HTML，这会导致AJAX解析响应失败，连响应内容都拿不到；
• 至于dd()不显示，是因为dd()的输出会返回给AJAX的响应，但不会像整页提交那样直接展示在浏览器窗口里——你得打开浏览器开发者工具的「Network」面板，找到ExcelToArray这个请求，查看它的「Response」内容才能看到dd()的输出。

解决方案 #

根据你的需求，推荐两种修复方式：

方案一：控制器返回JSON，前端动态渲染内容（更符合AJAX设计初衷） #

这种方式保留异步无刷新的优势，让控制器返回数据，前端用JS动态生成复选框表单：

1. 修改控制器代码
   把原来返回视图的代码改成返回JSON数据：

// 替换最后一行的return view
return response()->json([
    'like_values' => $like_values
]);

2. 修改AJAX代码
   添加success回调处理返回的JSON数据，动态生成表单内容：

$('#xlsForm').submit(function uploadFile(event){
    event.preventDefault();
    $.ajax({
        url: "{{route('ExcelToArray')}}",
        method: "POST",
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData: false,
        success: function (response) {
            // 找到要插入表单的容器（原@if(isset($like_values))所在位置）
            const targetContainer = $('.col-md-3').find('.container.mt-5').next();
            // 清空原有内容
            targetContainer.empty();

            // 动态构建表单HTML
            let formHtml = `
                <form id="xlsFormUpdate" enctype="multipart/form-data">
                    {{ csrf_field() }} <!-- Blade语法自动生成CSRF令牌 -->
            `;
            // 循环生成复选框（给每个复选框设置唯一ID，避免标签关联错误）
            response.like_values.forEach(function(value) {
                formHtml += `
                    <input type="checkbox" id="skillChoice-${value}" name="skills" checked>
                    <label for="skillChoice-${value}">${value}</label><br>
                `;
            });
            formHtml += `
                    <input id="skillSubmit" type="submit"/>
                </form>
            `;

            // 把生成的HTML插入容器
            targetContainer.html(formHtml);

            // 执行你原来的load_data()
            load_data();
        },
        error: function(xhr) {
            // 处理请求错误（比如文件验证失败）
            console.error('请求出错:', xhr.responseText);
        }
    });
});

注意：如果你的JS代码放在单独的.js文件中（而非Blade视图），{{ csrf_field() }}不会被解析，需要在页面头部添加CSRF meta标签：

<meta name="csrf-token" content="{{ csrf_token() }}">

然后在AJAX里添加headers：

headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},

方案二：AJAX请求完成后刷新页面（简单但失去异步优势） #

如果不想大改代码，也可以在AJAX请求完成后强制刷新页面，这样页面会重新加载控制器返回的视图，自然能拿到$like_values变量：

$('#xlsForm').submit(function uploadFile(event){
    event.preventDefault();
    $.ajax({
        url: "{{route('ExcelToArray')}}",
        method: "POST",
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData: false,
        complete: function () {
            // 刷新当前页面
            window.location.reload();
        },
    });
});

这种方式相当于用AJAX发了请求又刷新页面，和普通表单提交效果差不多，适合快速临时修复，但没有发挥AJAX的异步优势。

调试小技巧 #

以后调试AJAX请求时，记得打开浏览器开发者工具的「Network」标签：

• 找到对应的请求，查看「Request」确认参数是否正确发送；
• 查看「Response」就能看到控制器返回的内容（包括dd()的输出）；
• 查看「Console」标签能看到AJAX的错误信息。

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