EJS循环生成的首个编辑按钮无法发送POST请求，其余按钮正常

我碰到过好几个类似的情况，大概率是前端生成的代码或者事件绑定出了问题，咱们一步步来排查：

先查前端生成的HTML结构 #

首先右键页面打开「查看页面源码」，对比第一个编辑按钮和后面正常按钮的代码，重点看这几点：

• 第一个按钮所在的表单action属性是不是正确生成了/todo/edit/[正确的todoId]？会不会第一个todo的id是空的或者没渲染出来？
• 表单的method属性是不是明确写了POST？如果漏写的话，浏览器默认会发GET请求，而你的服务端只监听POST路由，自然不会响应。
• 有没有标签嵌套错误？比如第一个表单没闭合，导致后面的按钮都被包含在第一个表单里，反而第一个按钮的行为异常？

举个例子，假设你的EJS循环代码是这样的：

<% todos.forEach(todo => { %>
  <form action="/todo/edit/<%= todo.id %>" method="POST">
    <button class="edit-btn" type="submit">编辑</button>
  </form>
<% }) %>

那一定要确认第一个生成的<form>标签里，action的todoId是有效的，比如/todo/edit/1而不是/todo/edit/undefined。

再看事件绑定和浏览器控制台 #

打开浏览器开发者工具（按F12），先切到「Console」标签，点击第一个编辑按钮，看有没有报错信息——比如有没有JS代码阻止了这个按钮的默认提交行为？

然后切到「Network」标签，再点第一个按钮，看有没有POST请求发送出去：

• 如果完全没请求，说明点击事件根本没触发，要么是按钮被其他元素挡住了（比如页面顶部有个透明div覆盖），要么是事件绑定出了问题。
• 如果有请求，但状态码是404或者405，那大概率是请求URL不对，或者请求方法错了（比如发了GET）。

最后排查服务端日志 #

虽然你说其他按钮正常，但还是可以给服务端路由加个日志，确认第一个请求到底有没有到达：

app.post('/todo/edit/:todoId',function(req,res){ 
  console.log('收到编辑请求，todoId:', req.params.todoId); // 新增日志
  res.render('todo-edit',{cat:req.params.todoId}); 
});

点击第一个按钮后，看服务端控制台有没有输出这条日志：

• 如果有，说明请求已经到了服务端，问题可能出在todo-edit模板渲染上；
• 如果没有，那肯定是前端的问题，回到前面两步仔细查。

最常见的情况就是第一个按钮的表单没正确生成method="POST"，或者todoId为空导致URL无效，你先按这个思路排查试试！

内容的提问来源于stack exchange，提问作者Dilan Sachintha Nayanajith