使用JS导入JSON数据后页面展示默认结果，实现多按钮对应不同帖子接口

嘿，我懂你现在的需求——已经成功把第一个帖子的数据加载到网站上了，现在要做多个按钮对应不同的帖子接口，之前复制函数改内容的方式肯定显得很冗余对吧？其实咱们可以用通用函数+事件绑定的方式来解决，不用重复写一堆几乎一样的代码，维护起来也方便多了。

解决方案思路 #

核心就是封装一个能接收帖子ID的通用数据获取函数，然后给每个按钮绑定点击事件时，把对应的ID传进去就行，不管你是手动写按钮还是动态生成按钮都适用。

方法1：静态按钮 + 通用函数 #

先在HTML里写好按钮，然后用JS给它们绑定事件：

<!-- HTML部分 -->
<div class="button-group">
  <button data-post-id="1">加载帖子1</button>
  <button data-post-id="2">加载帖子2</button>
  <button data-post-id="3">加载帖子3</button>
  <!-- 要加更多按钮的话直接继续添加即可 -->
</div>
<!-- 用来展示帖子内容的容器 -->
<div id="post-display"></div>

// JavaScript部分
// 通用的获取并渲染帖子的函数
async function loadAndDisplayPost(postId) {
  try {
    // 发送请求获取对应ID的帖子数据
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    const postData = await response.json();
    
    // 把数据渲染到页面上
    renderPost(postData);
  } catch (error) {
    console.error('加载帖子出错:', error);
    document.getElementById('post-display').textContent = '抱歉，帖子加载失败了，请稍后再试';
  }
}

// 渲染帖子内容的辅助函数
function renderPost(post) {
  const displayContainer = document.getElementById('post-display');
  displayContainer.innerHTML = `
    <h2>${post.title}</h2>
    <p>${post.body}</p>
  `;
}

// 给所有按钮绑定点击事件
document.querySelectorAll('.button-group button').forEach(button => {
  button.addEventListener('click', () => {
    // 从按钮的data属性里拿到帖子ID
    const postId = button.dataset.postId;
    loadAndDisplayPost(postId);
  });
});

方法2：动态生成按钮（适合需要大量按钮的情况） #

如果需要十几个甚至更多按钮，手动写HTML太麻烦，可以用JS动态生成：

// JavaScript部分
// 先创建一个容器放按钮
const buttonContainer = document.createElement('div');
buttonContainer.classList.add('button-group');

// 生成10个帖子按钮（数量可以自行修改）
for (let i = 1; i <= 10; i++) {
  const btn = document.createElement('button');
  btn.textContent = `加载帖子${i}`;
  // 直接给按钮绑定点击事件，传对应的ID
  btn.addEventListener('click', () => loadAndDisplayPost(i));
  buttonContainer.appendChild(btn);
}

// 把按钮容器加到页面里
document.body.appendChild(buttonContainer);

// 下面的loadAndDisplayPost和renderPost函数和方法1里的完全一样，直接复用即可

为什么这么做更好？ #

• 避免重复代码：不管有多少个按钮，只需要一个核心函数，不用复制粘贴改ID
• 维护更方便：如果以后要改请求逻辑或者渲染样式，只需要修改一处代码
• 扩展性强：要加新按钮的话，要么在HTML里加一行，要么改循环的数字就行

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