如何在EJS中通过前后按钮遍历服务端传入列表，是否需要POST请求实现分页

你不需要额外编写表单和POST请求即可实现该功能，以下是两种常用实现方案：

方案1：纯前端实现（无额外后端请求，优先推荐） #

所有交互逻辑都在前端完成，不需要修改现有后端代码，响应速度快，适合小体量数组场景。
home.ejs 代码示例：

<div>
  <p>当前展示内容：<span id="currentLetter"><%= letters[0] %></span></p>
  <button id="prevBtn" disabled>上一页</button>
  <button id="nextBtn">下一页</button>
</div>

<script>
// 将EJS传入的服务端数组转为前端JS可操作的数组
const letters = <%- JSON.stringify(letters) %>;
let currentIndex = 0;
const currentEl = document.getElementById('currentLetter');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

// 上一页逻辑
prevBtn.addEventListener('click', () => {
  if (currentIndex <= 0) return;
  currentIndex--;
  updateView();
});

// 下一页逻辑
nextBtn.addEventListener('click', () => {
  if (currentIndex >= letters.length - 1) return;
  currentIndex++;
  updateView();
});

// 同步更新页面展示和按钮状态
function updateView() {
  currentEl.textContent = letters[currentIndex];
  prevBtn.disabled = currentIndex === 0;
  nextBtn.disabled = currentIndex === letters.length - 1;
}
</script>

方案2：后端路由配合实现（适合需要后端参与的场景） #

如果需要后端记录用户浏览位置、或者数组数据量过大不想一次性全量传到前端，可以选择该方案，仅需修改现有GET路由增加查询参数即可，无需POST请求。

1. 修改app.js代码：

app.get("/home", (req, res)=>{
    const letters = ["a", "b", "c", "d"];
    // 读取请求参数中的索引，做边界校验避免越界
    const currentIndex = Math.max(0, Math.min(Number(req.query.index) || 0, letters.length - 1));
    res.render("home", {
        letters: letters,
        currentIndex: currentIndex,
        currentLetter: letters[currentIndex]
    });
})

2. home.ejs代码示例：

<div>
  <p>当前展示内容：<%= currentLetter %></p>
  <a href="/home?index=<%= currentIndex - 1 %>">
    <button <%= currentIndex === 0 ? 'disabled' : '' %>>上一页</button>
  </a>
  <a href="/home?index=<%= currentIndex + 1 %>">
    <button <%= currentIndex === letters.length - 1 ? 'disabled' : '' %>>下一页</button>
  </a>
</div>

该方案每次点击会刷新页面，可在后端灵活扩展埋点、权限校验等逻辑。

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