如何从Laravel控制器通过AJAX传递数组并在模态框生成表格

我有一个PHP返回的二维数组，结构如下：

Array ( 
    [0] => Array ( 
        [start_break] => 2019-05-23 09:01:23 
        [end_break] => 2019-05-23 09:04:36 
        [time_diff] => 0.05 
    ) 
    [1] => Array ( 
        [start_break] => 2019-05-23 12:05:33 
        [end_break] => 2019-05-23 12:07:19 
        [time_diff] => 0.03 
    ) 
)

已经写了AJAX请求和基础的HTML表格，但不知道怎么把数组内容追加到表格主体里，请求技术帮助：

AJAX代码：

$.ajax({ 
    type: 'GET', 
    url: 'get-breaks', 
    data: { t_date: $t_date, emp_id: $emp_id },
    success: function (data) { 
        //append to table 
    }, 
    error: function (data) { } 
});

HTML表格：

<table id="breaks-table"> 
    <tr> 
        <th>Start Break</th> 
        <th>End Break</th> 
        <th>Time Difference</th> 
    </tr> 
</table>

第一步：确保后端返回JSON格式数据 #

首先你的PHP接口get-breaks需要把数组转换成JSON格式输出，这样JS才能方便解析。修改后端代码：

// 假设你的数组变量是$breaks_array
header('Content-Type: application/json');
echo json_encode($breaks_array);
exit;

第二步：修改AJAX的success回调函数解析数据并渲染表格 #

在success函数里，我们可以循环遍历返回的JSON数组，动态生成表格行并追加到表格中。为了避免重复渲染，建议先清空表格现有内容（表头保留）：

$.ajax({ 
    type: 'GET', 
    url: 'get-breaks', 
    data: { t_date: $t_date, emp_id: $emp_id },
    dataType: 'json', // 指定接收JSON格式数据，避免手动解析
    success: function (data) { 
        // 获取表格对象
        const table = $('#breaks-table');
        // 清空表头以外的内容（避免重复添加）
        table.find('tr:not(:first)').remove();
        
        // 如果数据为空，提示无记录
        if (data.length === 0) {
            table.append('<tr><td colspan="3">No break records found.</td></tr>');
            return;
        }
        
        // 循环遍历数据，生成表格行
        $.each(data, function(index, item) {
            const row = `<tr>
                <td>${item.start_break}</td>
                <td>${item.end_break}</td>
                <td>${item.time_diff}</td>
            </tr>`;
            table.append(row);
        });
    }, 
    error: function (xhr, status, error) { 
        console.error('Error fetching break data:', error);
        // 给用户显示错误提示
        $('#breaks-table').append('<tr><td colspan="3">Failed to load break records.</td></tr>');
    } 
});

关键说明 #

• dataType: 'json'：告诉jQuery自动把返回的响应解析成JSON对象，省去手动调用JSON.parse()的步骤
• 清空现有行：每次请求成功后先移除表头外的行，防止多次请求导致数据重复叠加
• 空数据处理：当返回的数组为空时，显示友好的无数据提示
• 错误处理：在error回调里捕获请求失败的情况，既打印错误信息方便调试，也给前端用户显示提示

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