如何在JavaScript中展示PHP数据库查询返回的结果？

这个问题的核心是后端返回的数据格式不兼容：你现在的PHP代码直接返回了mysqli_result对象的字符串化输出（就是你看到的object(mysqli_result)#3...），而不是JavaScript能识别的结构化数据（比如JSON数组）。所以前端拿到的只是一串文本，自然没法用forEach遍历，用for...of才会把每个字符当成单独元素。

第一步：修改PHP模型代码，把查询结果转成数组 #

原来的模型代码直接返回了mysqli_result对象，我们需要把它转换成关联数组，这样才能后续转成JSON：

$sql = "SELECT medical_agenda_id, day, `date`, time_start, time_end, hour_status_id FROM medical_agenda WHERE hour_status_id>='0' AND professional_id='".$id."' ;";
$res = $this->db->query($sql);
// 将查询结果转换为关联数组（每条记录是一个键值对对象）
$results = $res->fetch_all(MYSQLI_ASSOC);
// 释放结果集，避免资源占用
$res->free();
// 返回处理后的数组
return $results;

第二步：修改PHP控制器（src_agenda.php），输出JSON格式数据 #

控制器里调用模型方法后，需要设置正确的响应头，并输出JSON编码的数据：

// 假设你已经实例化了模型并调用了对应的方法
$agendaData = $yourModelInstance->getProfessionalAgenda(); // 替换成你实际的方法名
// 设置响应头为JSON类型，告诉前端这是JSON数据
header('Content-Type: application/json');
// 把数组编码成JSON字符串并输出
echo json_encode($agendaData);
// 输出后立即终止脚本，避免额外输出干扰JSON格式
exit;

第三步：修改JavaScript的Ajax请求，解析JSON数据 #

把dataType改成"json"，这样jQuery会自动把返回的JSON字符串解析成JavaScript数组，之后就能正常遍历了：

$.ajax({
    type: "GET",
    url: "controller/appointment/src_agenda.php",
    data: {
        function: "professional",
        variable: professional,
    },
    dataType: "json", // 关键：指定接收JSON格式数据
    fail: function( jqXHR, textStatus, errorThrown ) {
        alert(jqXHR);
    },
    error: function (jqxhr, ajaxOptions, thrownError) {
        alert(JSON.stringify(jqxhr));
        alert(jqxhr.status);
        alert(thrownError);
    },
    success: function(data){
        console.log(data); // 现在data是一个JavaScript数组，每条记录是对象
        // 遍历每一行数据并展示
        data.forEach(function(row) {
            // 示例：打印每条记录的关键信息
            console.log(`日程ID: ${row.medical_agenda_id}，日期: ${row.date}，时段: ${row.time_start}-${row.time_end}`);
            
            // 如果你要把数据渲染到页面上，比如插入到列表中
            const agendaItem = document.createElement('div');
            agendaItem.className = 'agenda-item';
            agendaItem.innerHTML = `
                <p><strong>日期:</strong> ${row.day} ${row.date}</p>
                <p><strong>时段:</strong> ${row.time_start} 至 ${row.time_end}</p>
                <p><strong>状态:</strong> ${row.hour_status_id}</p>
            `;
            document.getElementById('agenda-container').appendChild(agendaItem);
        });
    }
});

这样修改后，前端就能正确拿到可遍历的数组，轻松处理每一行查询结果了。

内容的提问来源于stack exchange，提问作者Ricardo Javier Chavarra Gonzal