Laravel中根据ID获取表行并在弹窗模态框展示失败，求解决方案

核心问题分析 #

你的代码存在两个关键错误：

• 控制器查询未使用前端传递的id参数，反而写了一个无意义的条件：where('biniyojan_details.details_id', '=', 'biniyojan_details.biniyojan_id')，导致查询结果为空或不符合预期。
• 控制器未接收前端AJAX发送的id参数，无法根据用户点击的行ID筛选数据。

修正步骤 #

1. 修正控制器代码 #

修改biniyojan_popup_details方法，接收前端参数并按正确条件查询：

public function biniyojan_popup_details(Request $request)
{
    $biniyojan_popup_details = collect();
    
    // 验证请求参数
    if($request->checking_viewbtn && $request->id){
        $biniyojan_popup_details = DB::table('biniyojan_details')
            ->leftJoin('biniyojan','biniyojan.biniyojan_id','=','biniyojan_details.biniyojan_id')
            ->select('biniyojan_details.*','biniyojan.date','biniyojan.ab','biniyojan.behora')
            // 根据前端传递的ID筛选数据，若ID对应biniyojan_id则修改字段名
            ->where('biniyojan_details.details_id', $request->id)
            ->get();
    }

    return response()->json(['biniyojan_popup_details' => $biniyojan_popup_details]);
}

注意：如果前端传递的id是关联表的biniyojan_id，请将where条件改为where('biniyojan_details.biniyojan_id', $request->id)。

2. 确认路由配置正确性 #

确保路由文件中已正确定义命名路由：

// web.php
Route::get('/biniyojan-popup-details', [YourController::class, 'biniyojan_popup_details'])->name('biniyojan_popup_details');

3. 前端脚本优化（含调试） #

<script>
    $(document).ready(function() {
        $('.view_btn').click(function(e) {
            e.preventDefault();
          
            var id = $(this).closest('tr').find('.id').text().trim();
            console.log('当前ID:', id); // 调试用，确认ID获取正确

            $.ajax({
                type: "GET",
                url: "{{ route('biniyojan_popup_details') }}",
                data: {
                    'checking_viewbtn': true,
                    'id': id,
                },
                success: function(data) {
                    var html = '';
                    var biniyojan_popup_details = data.biniyojan_popup_details;
                    if (biniyojan_popup_details.length > 0) {
                        for (let i = 0; i < biniyojan_popup_details.length; i++) {
                            html += `
                                <table border="1" style="width:50%" class="table table-hover table-wrapper-scroll-y my-custom-scrollbar">
                                    <thead class="text-white bg-primary" style="font-size: 14px;">
                                        <tr>
                                            <th>${biniyojan_popup_details[i].biniyojan_id}</th>
                                            <th>शिर्षक</th>
                                            <th>डेबिट</th>
                                            <th>क्रेडिट</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-dark" style="font-size: 14px;">
                                        <tr>
                                            <td>${biniyojan_popup_details[i].kriyakalap}</td>
                                            <td>${biniyojan_popup_details[i].cash}</td>
                                        </tr>
                                        <tr>
                                            <td>${biniyojan_popup_details[i].debit_credit_type}</td>
                                            <td></td>
                                            <td>${biniyojan_popup_details[i].cash}</td>
                                        </tr>
                                        <tr class="text-white bg-secondary" style="font-size: 14px;">
                                            <td style="font-weight:bold;">Total</td>
                                            <td style="font-weight:bold;">${biniyojan_popup_details[i].cash}</td>
                                            <td style="font-weight:bold;">${biniyojan_popup_details[i].cash}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            `;
                        }
                    } else {
                        html += `
                            <tr>
                                <td colspan="4">数据未找到!</td> 
                            </tr>
                        `;
                    }
                    $(".modal-body").html(html);
                    $('#exampleModalCenter').modal('show');
                },
                error: function(xhr, status, error) {
                    console.error('请求错误:', error);
                    alert('加载数据失败，请检查网络或参数');
                }
            })
        });
    });
</script>

调试建议 #

• 打开浏览器开发者工具（F12），查看Network标签页，确认AJAX请求是否发送成功、参数是否正确传递。
• 在控制器方法中添加dd($request->all())，检查接收到的参数是否符合预期。

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