JSP 表格修改按鈕實作思路：列表頁 + 表單頁 + Servlet 處理

經典三層流程

1. 列表頁 (list.jsp)：
   查詢資料庫，用 <table> 渲染資料，每行末尾放「修改」按鈕/連結，攜帶主鍵 ID。

   <c:forEach items="${userList}" var="u">
     <tr>
       <td>${u.name}</td>
       <td>${u.email}</td>
       <td><a href="edit.jsp?id=${u.id}">修改</a></td>
     </tr>
   </c:forEach>
   

2. 表單頁 (edit.jsp)：
   根據 ID 查詢單筆資料，回填表單欄位。

   <% User u = userDao.findById(request.getParameter("id")); %>
   <form action="UpdateServlet" method="post">
     <input type="hidden" name="id" value="<%=u.getId()%>">
     <input name="name" value="<%=u.getName()%>">
     <input name="email" value="<%=u.getEmail()%>">
     <button type="submit">保存</button>
   </form>
   

3. 處理 Servlet (UpdateServlet)：
   接收表單參數，呼叫 DAO 更新，重導向列表頁。

   @WebServlet("/UpdateServlet")
   public class UpdateServlet extends HttpServlet {
       protected void doPost(HttpServletRequest req, HttpServletResponse resp) {
           User u = new User();
           u.setId(Integer.parseInt(req.getParameter("id")));
           u.setName(req.getParameter("name"));
           u.setEmail(req.getParameter("email"));
           userDao.update(u);
           resp.sendRedirect("list.jsp");
       }
   }
   

進階改良

• AJAX 彈窗編輯：列表頁不跳轉，點擊按鈕彈 Bootstrap Modal，fetch 取得資料填充，提交後局部刷新列表。
• 統一 Controller (Spring MVC)：@GetMapping("/edit/{id}") 回傳表單視圖，@PostMapping("/update") 處理提交。
• 資料驗證：前端 JS 檢查 + 後端 Bean Validation (@NotBlank 等)。

關鍵技術點