如何用JavaScript从JSONPlaceholder获取数据并在HTML页面展示？
2026-5-27
如何将JSON数据渲染到HTML页面
我来帮你完善这个功能！你已经用fetch成功拿到了数据，现在只需要把控制台打印的逻辑改成将数据插入到HTML页面的操作就行。下面是完整的实现方案：
步骤1：准备HTML结构
首先在页面里添加用于展示标题和内容的容器，给它们设置唯一ID方便JS获取：
<!DOCTYPE html> <html> <head> <title>展示JSON数据</title> </head> <body> <h2>帖子标题：<span id="post-title"></span></h2> <p>帖子内容：<span id="post-content"></span></p> <!-- 可以加个按钮触发请求，或者页面加载自动执行 --> <button onclick="req1()">加载帖子</button> <script> // 这里放JS函数 </script> </body> </html>
步骤2：完善JS函数
修改你的req1函数，把获取到的title和body（也就是帖子内容）插入到对应的HTML元素中：
function req1() { fetch('https://jsonplaceholder.typicode.com/posts/1') .then(response => response.json()) .then(json => { // 获取页面上的元素 const titleElement = document.getElementById('post-title'); const contentElement = document.getElementById('post-content'); // 将JSON数据赋值给元素 titleElement.textContent = json.title; contentElement.textContent = json.body; }) .catch(error => { // 别忘了处理请求失败的情况 console.error('请求出错了:', error); alert('加载帖子失败，请稍后重试'); }); }
关键说明
- 我们用
document.getElementById()获取页面上的元素，这是最直接的DOM操作方式 - 使用
textContent而不是innerHTML来插入内容，这样更安全，能避免XSS风险 - 加上
catch块处理请求失败的情况，提升用户体验 - 如果希望页面加载时自动获取数据，可以在
script标签里直接调用req1()，不需要按钮触发
内容的提问来源于stack exchange，提问作者Crashy
