PHP foreach生成HTML经JSON返回后显示[object Object]的解决问询

你遇到的问题主要来自两个地方：PHP端循环中覆盖了HTML内容且数据结构不对，以及前端没有正确读取对象中的HTML字符串。下面一步步来修复：

第一步：修正PHP代码的循环逻辑 #

现在你的PHP代码在foreach循环里每次都会重置$html，并且每次循环都会覆盖$recentProjData变量，最后只会保留最后一条项目的HTML。同时，你把单个项目的HTML包装成了一个对象，但实际上我们需要把所有项目的HTML拼接成一个完整的字符串。

修改后的PHP代码：

try {
    $sql_recentProjects = " SELECT * FROM project_gallery ORDER BY date_added ASC LIMIT 5 ";
    if ($recentProjects_stmt = $con->prepare($sql_recentProjects)) {
        $recentProjects_stmt->execute();
        $recentProjects_rows = $recentProjects_stmt->fetchAll(PDO::FETCH_ASSOC);
        // 初始化$html为空字符串，放在循环外面
        $html = '';
        foreach ($recentProjects_rows as $recentProjects_row) {
            $precProjName = $recentProjects_row['p_name'];
            $recProjImg = $recentProjects_row['p_img'];
            // 注意这里你之前用了未定义的$precProjAlt，临时用项目名称替代，可按需调整
            $displayRecProjImg = '<img src="/php'.$recProjImg.'" alt="'. $precProjName .'" class="projectDisplayImg">';
            
            $html .= '<div class="recentProjectCont">';
            $html .= '<div class="recentProjectImg">';
            $html .= $displayRecProjImg;
            $html .= '</div>';
            $html .= '<div class="recProjInfoCont">';
            $html .= '<div class="">';
            $html .= $precProjName;
            $html .= '</div>';
            $html .= '</div>';
            $html .= '</div>';
        }
        // 循环结束后，把拼接好的完整HTML放进数组
        $recentProjData = array('html' => $html);
    }
} catch(PDOException $e) {
    echo "Connection failed: " . $e->getMessage();
}
echo json_encode(['recentProjectData' => $recentProjData]);

第二步：修正前端JS的读取逻辑 #

现在你的JS代码有两个小问题：

1. 当设置datatype: 'json'时，jQuery已经自动把响应解析成了JS对象，不需要再调用JSON.parse(data)。
2. 你直接把recentProjectData这个对象赋值给了innerHTML，而它是一个包含html属性的对象，浏览器会把对象默认转换成字符串[object Object]。

修改后的JS代码：

function ajaxCallCatalogs() {
    $.ajax({
        url: 'php/projects/projectGallerySelect.php',
        datatype: 'json',
        success: function (data) {
            // data已经是解析好的对象，无需JSON.parse
            const recentProjectData = data.recentProjectData;
            // 读取对象中的html属性值
            document.getElementById('recentProjectWrap').innerHTML = recentProjectData.html;
        }
    });
}
ajaxCallCatalogs();
setInterval(ajaxCallCatalogs, 150000);

为什么原来的代码会显示[object Object]？ #

因为你在PHP中把$recentProjData定义成了array('html' => $html)，JSON编码后变成了一个JS对象{html: "..."}。当你直接把这个对象赋值给innerHTML时，浏览器会调用对象的toString()方法，默认返回[object Object]，这就是你看到的结果。

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