点击按钮实现从MySQL查询并展示指定类型用户数据的方法

你可以根据数据量大小选择以下两种实现方式：

方案1：前端全量缓存+本地筛选（适合数据量小于1000条的场景） #

这种方式页面加载时一次性拉取所有用户数据存在本地，点击按钮直接过滤渲染，响应速度快。

第一步：修改原有HTML代码 #

<table id="table">
  <tr>   
    <th>id</th>
    <th>Name</th>
    <th>Phone_number</th>
    <th>Type</th>
  </tr>
  <!-- 新增tbody用于动态填充数据 -->
  <tbody id="tableBody"></tbody>
</table>

<!-- 给按钮增加id和自定义属性存要筛选的类型 -->
<button type="button" class="filter-btn" data-type="normal user">Display normal user</button> 
<button type="button" class="filter-btn" data-type="premium user">Display premium user</button> 

第二步：编写前端JS逻辑 #

// 存储全量用户数据
let allUserList = []

// 页面加载时拉取所有用户数据
window.onload = async () => {
  const res = await fetch('/api/getAllUsers')
  allUserList = await res.json()
  // 默认渲染所有数据
  renderTable(allUserList)
}

// 表格渲染函数
function renderTable(userList) {
  const tbody = document.getElementById('tableBody')
  // 清空原有内容
  tbody.innerHTML = ''
  // 遍历生成行
  userList.forEach(user => {
    const tr = document.createElement('tr')
    tr.innerHTML = `
      <td>${user.id}</td>
      <td>${user.name}</td>
      <td>${user.phone_number}</td>
      <td>${user.user_type}</td>
    `
    tbody.appendChild(tr)
  })
}

// 绑定按钮点击事件
document.querySelectorAll('.filter-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const targetType = btn.dataset.type
    // 过滤对应类型的用户
    const filteredList = allUserList.filter(user => user.user_type === targetType)
    renderTable(filteredList)
  })
})

第三步：编写后端接口（以Node.js+MySQL为例） #

// 查所有用户的接口
app.get('/api/getAllUsers', async (req, res) => {
  // 连接MySQL执行查询
  const [results] = await connection.query('SELECT id, name, phone_number, user_type FROM users')
  res.json(results)
})

方案2：点击按钮异步查询后端（适合数据量大的场景） #

这种方式每次点击按钮才请求对应类型的数据，避免一次性加载过多数据占用内存。

前端新增请求逻辑 #

// 绑定按钮点击事件
document.querySelectorAll('.filter-btn').forEach(btn => {
  btn.addEventListener('click', async () => {
    const targetType = btn.dataset.type
    // 带筛选类型请求后端
    const res = await fetch(`/api/getUsersByType?type=${encodeURIComponent(targetType)}`)
    const userList = await res.json()
    renderTable(userList)
  })
})

后端新增对应接口 #

app.get('/api/getUsersByType', async (req, res) => {
  const userType = req.query.type
  // 使用参数绑定避免SQL注入
  const [results] = await connection.query(
    'SELECT id, name, phone_number, user_type FROM users WHERE user_type = ?',
    [userType]
  )
  res.json(results)
})

注意：实际使用时建议增加加载状态提示、接口异常处理逻辑，SQL查询必须使用参数绑定，禁止直接拼接用户输入的参数避免注入风险。

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