如何将AJAX获取的element._id作为Laravel路由参数传递？

第一步：修正路由定义 #

你的路由参数语法存在错误，Laravel路由参数不需要带$，修正后的路由如下：

Route::get('/products-list/detail/{id}', [ProductController::class,'detail'])->name('pro.detail');

第二步：生成详情页链接（两种可选方案） #

方案一：后端生成完整URL后返回给AJAX

在提供商品数据的后端接口中，给每个商品追加详情页URL字段，利用Laravel的route()函数生成正确的路由地址：

// 示例：从数据库获取商品列表并格式化
$products = Product::select('id', 'name', 'price')->get();
$formattedProducts = $products->map(function ($product) {
    return [
        '_id' => $product->id,
        'name' => $product->name,
        'price' => $product->price,
        'detail_url' => route('pro.detail', ['id' => $product->id])
    ];
});

return response()->json($formattedProducts);

前端AJAX回调中直接使用返回的detail_url：

// AJAX请求示例
$.ajax({
    url: '/api/products',
    method: 'GET',
    success: function(data) {
        let cardHtml = '';
        data.forEach(element => {
            cardHtml += `
                <div class="product-card">
                    <h3>${element.name}</h3>
                    <p>¥${element.price}</p>
                    <a class="card-info" href="${element.detail_url}">查看详情</a>
                </div>
            `;
        });
        // 将生成的卡片插入页面容器
        $('#product-list').html(cardHtml);
    }
});

方案二：前端拼接路由地址

在product.blade.php中先定义一个带占位符的基础路由模板，再在JS中替换占位符生成实际地址：

<!-- 在blade模板的script标签中定义基础URL -->
<script>
    const productDetailRoute = "{{ route('pro.detail', ['id' => 'PLACEHOLDER']) }}";
</script>

AJAX回调中替换占位符生成链接：

$.ajax({
    url: '/api/products',
    method: 'GET',
    success: function(data) {
        let cardHtml = '';
        data.forEach(element => {
            // 替换占位符为商品ID
            const detailUrl = productDetailRoute.replace('PLACEHOLDER', element._id);
            cardHtml += `
                <div class="product-card">
                    <h3>${element.name}</h3>
                    <p>¥${element.price}</p>
                    <a class="card-info" href="${detailUrl}">查看详情</a>
                </div>
            `;
        });
        $('#product-list').html(cardHtml);
    }
});

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