如何在Laravel中通过AJAX返回带参数的view并实现跳转？

先修正现有代码中的错误 #

1. 控制器变量未定义：add方法中$dl_id未定义，应替换为参数$id：

public function add($id){
    $dL = LD::find($id);
    // 修正$dl_id为$id
    $dD = DD::where('l_d_id', $id)->where('ia', true)->get();

    return view('dD.add', [
        'dL' => $dL,
        'dD' => $dD,
    ])->render();
}

2. 视图隐藏字段值缺失：表单中的dd_id[]隐藏字段需要赋值为对应$dd的ID：

<input type='hidden' name='dd_id[]' value="{{$dd->id}}">

方案一：通过AJAX验证后跳转至目标路由（推荐） #

这种方式符合常规页面跳转逻辑，先通过AJAX验证参数有效性，再跳转至目标URL由Laravel正常渲染视图。

控制器修改

返回JSON格式的跳转URL（若验证失败返回错误信息）：

public function add($id){
    $dL = LD::find($id);
    if (!$dL) {
        return response()->json(['error' => '指定的DL不存在'], 404);
    }
    // 若无需提前验证，可直接返回跳转URL
    return response()->json([
        'redirect_url' => route('dd.add', ['id' => $id])
        // 若未给路由命名，可直接写："/dd/{$id}/add"
    ]);
}

建议给路由命名，方便后续维护：

Route::get('/dd/{id}/add', 'DDController@add')->name('dd.add');

AJAX请求修改

在success回调中执行页面跳转：

$('#btn-add').on('click', function (e) {
    e.preventDefault()
    const dl_id = $('#select_dl').val();
    const url = `/dd/${dl_id}/add`;

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

    $.ajax({
        type: "GET",
        url: url,
        success: function (res){
            // 跳转到目标URL，Laravel会自动渲染带参数的视图
            window.location.href = res.redirect_url;
        },
        error: function(xhr) {
            // 处理验证失败的情况
            alert(xhr.responseJSON?.error || '请求失败');
        }
    });
})

方案二：AJAX加载视图内容并修改地址栏（无刷新跳转） #

若需要保持无刷新体验，可通过AJAX获取视图HTML，替换页面内容后修改浏览器地址栏URL。

控制器修改

返回JSON格式的视图HTML和目标URL：

public function add($id){
    $dL = LD::find($id);
    if (!$dL) {
        return response()->json(['error' => '指定的DL不存在'], 404);
    }
    $dD = DD::where('l_d_id', $id)->where('ia', true)->get();

    return response()->json([
        'html' => view('dD.add', compact('dL', 'dD'))->render(),
        'url' => route('dd.add', ['id' => $id])
    ]);
}

AJAX请求修改

在success回调中替换页面内容并修改地址栏：

$('#btn-add').on('click', function (e) {
    e.preventDefault()
    const dl_id = $('#select_dl').val();
    const url = `/dd/${dl_id}/add`;

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

    $.ajax({
        type: "GET",
        url: url,
        success: function (res){
            // 替换页面内容（假设页面内容容器的ID为content）
            $('#content').html(res.html);
            // 修改地址栏URL，不触发页面刷新
            history.pushState({}, '', res.url);
        },
        error: function(xhr) {
            alert(xhr.responseJSON?.error || '请求失败');
        }
    });
})

注意：此方式需要确保页面的布局容器（如#content）与视图的@section('content')对应，同时后续的表单提交等操作需适配无刷新场景。

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