无需Get按钮从Firebase向网页批量获取并展示数据的方法

没问题，我帮你调整代码，实现页面加载时自动从Firebase的Admins节点获取所有数据并逐行展示的需求。下面是完整的修改后代码：

HTML代码 #

<html>
<head>
    <title>Retrieve All Admin Data</title>
    <style>
        /* 可选：添加一点样式让展示更清晰 */
        .admin-item {
            border: 1px solid #eee;
            padding: 10px;
            margin: 10px auto;
            width: 80%;
            max-width: 500px;
            border-radius: 4px;
        }
        .admin-item p {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <center>
        <h2>All Admin Information</h2>
        <!-- 用来展示所有Admin数据的容器 -->
        <div id="adminList"></div>
    </center>
</body>
</html>

JavaScript代码 #

// 页面加载完成后自动执行数据获取
window.onload = function() {
    // 获取Admins节点下的所有数据
    firebase.database().ref('Admins').once('value').then(function(snapshot) {
        const adminList = document.getElementById('adminList');
        // 清空容器（防止重复加载）
        adminList.innerHTML = '';
        
        // 遍历每个Admin节点
        snapshot.forEach(function(childSnapshot) {
            // 获取当前Admin的所有字段
            const adminData = childSnapshot.val();
            const name = adminData.name;
            const phone = adminData.phone;
            const password = adminData.password;
            const username = adminData.username; // 原示例数据里有username，补充展示
            
            // 创建一个div来包裹单个Admin的信息
            const adminItem = document.createElement('div');
            adminItem.className = 'admin-item';
            
            // 构建Admin信息的HTML内容
            adminItem.innerHTML = `
                <p><strong>Username:</strong> ${username}</p>
                <p><strong>Name:</strong> ${name}</p>
                <p><strong>Phone Number:</strong> ${phone}</p>
                <p><strong>Password:</strong> ${password}</p>
            `;
            
            // 将当前Admin的信息添加到容器中
            adminList.appendChild(adminItem);
        });
    }).catch(function(error) {
        // 处理可能的错误
        console.error('Error fetching admin data:', error);
        document.getElementById('adminList').innerHTML = '<p>Failed to load admin data. Please check the console for details.</p>';
    });
};

关键修改说明： #

• 移除了原有的输入框和Get按钮，无需手动触发加载
• 添加了adminList容器，用来统一承载所有Admin的信息展示
• 改用window.onload事件，页面加载完成后自动触发数据获取
• 直接获取Admins整个节点的数据，而非单个用户节点
• 使用snapshot.forEach()遍历所有子节点（每个子节点对应一个Admin）
• 为每个Admin创建独立的展示区块，让数据结构更清晰
• 增加了错误处理，方便调试加载失败的情况
• 补充展示了示例数据里的username字段，让信息更完整

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