使用AJAX获取数据并实现表格展示+点击查看详情功能求助

原代码存在的问题 #

• result.json 遗漏括号，正确写法是 result.json()（这是异步方法调用）
• 变量名错误：id.innerHTML 应为 name.innerHTML，且未指定具体属性（比如 obj.username）
• 未实现“查看更多”按钮的DOM创建与点击逻辑
• 未调用 load() 函数，页面加载后不会自动触发数据请求
• 缺少API请求的错误处理
• 表格无表头，可读性差

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Fetch data from API and display in table using AJAX</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        table { border-collapse: collapse; width: 80%; margin: 20px auto; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        .more-btn { cursor: pointer; background: #007bff; color: white; border: none; padding: 5px 10px; border-radius: 4px; }
        .detail-row { background-color: #f9f9f9; }
    </style>
</head>
<body>
    <h1 style="text-align: center;">User Data</h1>
    <table id="table">
        <thead>
            <tr>
                <th>Username</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script>
        // 页面加载完成后初始化数据
        window.onload = load;

        // 加载用户列表
        function load() {
            // 替换为你的用户列表API地址
            fetch("https://api.example.com/users")
                .then(result => result.json())
                .then(json => showUserList(json))
                .catch(err => alert(`加载用户列表失败: ${err.message}`));
        }

        // 渲染用户列表表格
        function showUserList(data) {
            const tableBody = document.querySelector("#table tbody");
            tableBody.innerHTML = ""; // 清空旧数据

            data.forEach(user => {
                const row = document.createElement('tr');
                
                // 用户名单元格
                const nameCell = document.createElement('td');
                nameCell.textContent = user.username;
                row.appendChild(nameCell);

                // 操作按钮单元格
                const actionCell = document.createElement('td');
                const moreBtn = document.createElement('button');
                moreBtn.className = "more-btn";
                moreBtn.textContent = "View More";
                // 绑定点击事件，传递用户标识（这里假设用username，也可以用id）
                moreBtn.onclick = () => loadUserDetails(user.username, row);
                actionCell.appendChild(moreBtn);
                row.appendChild(actionCell);

                tableBody.appendChild(row);
            });
        }

        // 加载并展示用户详情
        function loadUserDetails(username, parentRow) {
            // 替换为你的用户详情API地址，这里假设API接受username参数
            fetch(`https://api.example.com/users/${username}`)
                .then(result => result.json())
                .then(detail => {
                    // 检查是否已有详情行，避免重复添加
                    const existingDetail = parentRow.nextElementSibling;
                    if (existingDetail && existingDetail.classList.contains("detail-row")) {
                        existingDetail.remove();
                        parentRow.querySelector(".more-btn").textContent = "View More";
                        return;
                    }

                    // 创建详情行，合并两列
                    const detailRow = document.createElement('tr');
                    detailRow.className = "detail-row";
                    const detailCell = document.createElement('td');
                    detailCell.colSpan = 2;
                    
                    // 组装详情内容（根据你的API返回字段调整）
                    detailCell.innerHTML = `
                        <strong>用户详情:</strong><br>
                        ID: ${detail.id}<br>
                        邮箱: ${detail.email}<br>
                        姓名: ${detail.name}<br>
                        电话: ${detail.phone}
                    `;
                    
                    detailRow.appendChild(detailCell);
                    parentRow.insertAdjacentElement("afterend", detailRow);
                    parentRow.querySelector(".more-btn").textContent = "Hide Details";
                })
                .catch(err => alert(`加载用户详情失败: ${err.message}`));
        }
    </script>
</body>
</html>

关键功能说明 #

1. 初始化加载：通过window.onload = load确保页面加载完成后自动请求用户列表
2. 错误处理：每个fetch都添加catch块，捕获请求异常并给出提示
3. 查看更多逻辑：
   • 按钮点击时调用loadUserDetails，传递用户名和当前行元素
   • 检查是否已存在详情行，存在则删除并切换按钮文本为“View More”
   • 详情行合并两列，展示用户额外信息，按钮文本切换为“Hide Details”
4. 样式优化：添加基础CSS，提升表格可读性和按钮交互体验

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