使用 AJAX 在 Laravel 中动态构建表格：解决数据未定义问题

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\MyModal; // 确保引入了正确的模型

class EmployeeController extends Controller
{
    /**
     * 根据员工ID获取相关信息并以JSON格式返回。
     *
     * @param int $id 员工ID
     * @return \Illuminate\Http\JsonResponse
     */
    public function searchInfo($id)
    {
        // 确保请求是 AJAX 请求
        if (request()->ajax()) {
            // 使用 get() 方法获取多条记录，而不是 firstOrFail() 获取单条记录
            // 否则，如果返回的是单个模型对象，前端遍历时会出错
            $users = MyModal::select('id_type', 'id_number')
                            ->where('fk_emp_id', '=', $id)
                            ->get();

            // 返回 JSON 格式的数据，其中包含 'users' 键
            return response()->json(['users' => $users]);
        }

        // 如果不是 AJAX 请求，可以返回错误或重定向
        return response()->json(['error' => '非法请求'], 400);
    }
}

<!-- 触发 AJAX 请求的按钮 -->
<button class="showdata btn btn-primary" data-id="123">查看员工详情</button>
<!-- 假设这里有一个模态框，表格将显示在其中 -->
<div class="modal fade" id="informationmodal" tabindex="-1" role="dialog" aria-labelledby="informationmodalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="informationmodalLabel">员工详细信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table id="employee-data-table" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>ID 类型</th>
                            <th>ID 号码</th>
                        </tr>
                    </thead>
                    <tbody id="employee-table-body">
                        <!-- AJAX 返回的数据将插入到这里 -->
                        <tr>
                            <td colspan="2">点击按钮加载数据...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

$(document).ready(function() {
    // 监听 .showdata 按钮的点击事件
    $(document).on('click', '.showdata', function() {
        var employeeId = $(this).data('id'); // 获取按钮的 data-id 属性值

        // 发送 AJAX 请求
        $.ajax({
            url: "/search/" + employeeId + "/searchInfo", // 替换为你的路由
            type: "GET", // 请求方法
            dataType: "json", // 预期服务器返回的数据类型为 JSON
            beforeSend: function() {
                // 可选：在请求发送前显示加载指示器或清空旧数据
                $('#employee-table-body').empty().append('<tr><td colspan="2">加载中...</td></tr>');
            },
            success: function(response) {
                // 确保模态框被显示（如果表格在模态框内）
                $('#informationmodal').modal('show');

                // 获取表格体元素
                var tableBody = $('#employee-table-body');
                tableBody.empty(); // 清空表格体，移除旧数据或加载提示

                // 检查响应中是否存在 'users' 数据
                if (response.users && response.users.length > 0) {
                    // 遍历用户数据，为每个用户创建一行
                    $.each(response.users, function(index, user) {
                        // 使用模板字面量（ES6）构建表格行 HTML，更简洁易读
                        var row = `<tr>
                                       <td>${user.id_type}</td>
                                       <td>${user.id_number}</td>
                                   </tr>`;
                        tableBody.append(row); // 将行添加到表格体
                    });
                } else {
                    // 如果没有数据，显示提示信息
                    tableBody.append('<tr><td colspan="2">无相关数据。</td></tr>');
                }
            },
            error: function(xhr, status, error) {
                // 处理 AJAX 请求失败的情况
                console.error("AJAX 请求失败: ", status, error);
                alert("加载数据失败，请稍后再试。");
                $('#employee-table-body').empty().append('<tr><td colspan="2">数据加载失败。</td></tr>');
            }
        });
    });
});