如何将JSON GET请求的结果渲染到HTML页面page.html中？

嘿，我来帮你搞定这个问题——把GET请求拿到的JSON数据渲染到page.html页面上。我会用原生JavaScript来演示，不用任何框架，这样你能清晰看到整个流程的底层逻辑。

首先，你需要在page.html里准备一个用来展示数据的容器，比如一个<div>，这样我们后面可以把JSON数据转换成HTML插入进去。这里给你一个基础模板：

<!-- page.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JSON数据展示页面</title>
    <!-- 可以加一点简单的CSS美化，让页面看起来舒服点 -->
    <style>
        .data-item {
            border: 1px solid #eee;
            padding: 15px;
            margin: 10px 0;
            border-radius: 4px;
        }
        #data-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">获取到的JSON数据</h1>
    <!-- 这个容器就是我们要渲染数据的地方 -->
    <div id="data-container"></div>

    <!-- 把JS脚本放在页面底部，确保DOM元素都加载完成后再执行 -->
    <script src="app.js"></script>
</body>
</html>

接下来创建一个app.js文件，用现代的fetch API来发送GET请求、解析JSON，然后把数据转换成HTML插入到页面的容器里。

// app.js
// 替换成你实际要请求的API地址
const targetApiUrl = 'https://api.your-domain.com/your-data';
// 获取页面上的容器元素
const dataContainer = document.getElementById('data-container');

// 发送GET请求
fetch(targetApiUrl)
    .then(response => {
        // 先检查请求是否成功（HTTP状态码200-299）
        if (!response.ok) {
            throw new Error(`请求失败，状态码：${response.status}`);
        }
        // 把响应解析成JSON格式
        return response.json();
    })
    .then(jsonData => {
        // 调用自定义的渲染函数，把数据放到页面上
        renderJsonData(jsonData);
    })
    .catch(error => {
        // 处理请求过程中出现的错误，比如网络问题、JSON解析失败等
        dataContainer.innerHTML = `<p style="color: red;">加载数据失败：${error.message}</p>`;
        console.error('请求出错了：', error);
    });

// 定义渲染函数，根据你的JSON结构来生成HTML
function renderJsonData(data) {
    // 情况1：如果返回的是一个数组（比如列表数据）
    if (Array.isArray(data)) {
        // 把数组里的每个元素转换成HTML片段，再拼接起来
        const htmlItems = data.map(item => `
            <div class="data-item">
                <h3>${item.title || item.name}</h3>
                <p>${item.description || item.info}</p>
                <!-- 这里根据你的实际JSON字段修改，比如item.age、item.email等 -->
            </div>
        `).join('');
        dataContainer.innerHTML = htmlItems;
    }
    // 情况2：如果返回的是单个对象（比如详情数据）
    else if (typeof data === 'object' && data !== null) {
        // 把对象的键值对转换成HTML
        const htmlPairs = Object.entries(data).map(([key, value]) => `
            <p><strong>${key}:</strong> ${value}</p>
        `).join('');
        dataContainer.innerHTML = htmlPairs;
    }
    // 情况3：如果返回的是字符串、数字等简单类型
    else {
        dataContainer.innerHTML = `<p>${data}</p>`;
    }
}

• 一定要替换targetApiUrl为你实际要请求的接口地址，确保接口支持跨域（或者和page.html同域名），否则会出现CORS错误。
• 如果你的JSON结构和示例不一样，直接修改renderJsonData函数里的逻辑，匹配你的数据字段就行。比如你的JSON里有id、content字段，就把item.title改成item.id，item.description改成item.content。
• 如果你需要兼容IE这类旧浏览器，可以用XMLHttpRequest代替fetch，下面给你一个简化版的备选方案：

// 兼容旧浏览器的XMLHttpRequest版本
const xhr = new XMLHttpRequest();
xhr.open('GET', targetApiUrl, true);
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        try {
            const jsonData = JSON.parse(xhr.responseText);
            renderJsonData(jsonData);
        } catch (parseError) {
            dataContainer.innerHTML = `<p style="color: red;">解析JSON失败：${parseError.message}</p>`;
        }
    } else {
        dataContainer.innerHTML = `<p style="color: red;">请求失败，状态码：${xhr.status}</p>`;
    }
};
xhr.onerror = function() {
    dataContainer.innerHTML = `<p style="color: red;">网络错误，无法获取数据</p>`;
};
xhr.send();

// 同样使用上面的renderJsonData函数
function renderJsonData(data) {
    // ... 和之前一样的逻辑 ...
}

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