JSP foreach 迴圈輸出列表帶刪除按鈕：傳遞主鍵 ID 到刪除 Servlet

在 JSP 中用 `` 遍歷列表輸出資料行，每行附帶「刪除」按鈕/連結，點擊時需將該行的**主鍵 ID** 傳給後端刪除 Servlet。核心技巧是在迴圈變數中取得 ID，拼接到 URL 參數或表單隱藏欄位中。

資料模型假設

public class Category {
    private Long id;          // 主鍵
    private String name;
    // getter/setter
}

JSP 頁面完整範例

<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
<table>
    <tr><th>名稱</th><th>操作</th></tr>
    <c:forEach items="${categoryList}" var="category">
        <tr>
            <td><c:out value="${category.name}"/></td>
            <td>
                <!-- 方式一：超連結 GET（簡單、可收藏、不安全） -->
                <a href="deleteCategory?id=${category.id}" onclick="return confirm('確定刪除？');">刪除</a>

                <!-- 方式二：表單 POST（推薦、防 CSRF、支援大量資料） -->
                <form action="deleteCategory" method="post" style="display:inline;" onsubmit="return confirm('確定刪除？');">
                    <input type="hidden" name="id" value="${category.id}"/>
                    <button type="submit">刪除</button>
                </form>

                <!-- 方式三：AJAX 非同步刪除（體驗佳、無刷新） -->
                <button type="button" class="btn-delete" data-id="${category.id}">刪除</button>
            </td>
        </tr>
    </c:forEach>
</table>

<script src="${pageContext.request.contextPath}/js/jquery-3.7.1.min.js"></script>
<script>
$(function() {
    $('.btn-delete').click(function() {
        if (!confirm('確定刪除？')) return;
        var id = $(this).data('id');
        var $row = $(this).closest('tr');
        $.post('${pageContext.request.contextPath}/deleteCategory', {id: id}, function(resp) {
            if (resp.success) $row.fadeOut(300, function() { $(this).remove(); });
            else alert('刪除失敗：' + resp.msg);
        }, 'json');
    });
});
</script>

後端 Servlet 刪除邏輯

@WebServlet("/deleteCategory")
public class DeleteCategoryServlet extends HttpServlet {
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String idStr = req.getParameter("id");
        if (idStr == null || idStr.isEmpty()) {
            sendJson(resp, false, "缺少 ID"); return;
        }
        try {
            long id = Long.parseLong(idStr);
            categoryDao.deleteById(id);  // 實際刪除邏輯
            sendJson(resp, true, "刪除成功");
        } catch (NumberFormatException e) {
            sendJson(resp, false, "ID 格式錯誤");
        } catch (Exception e) {
            sendJson(resp, false, "伺服器錯誤：" + e.getMessage());
        }
    }

    private void sendJson(HttpServletResponse resp, boolean success, String msg) throws IOException {
        resp.setContentType("application/json;charset=UTF-8");
        resp.getWriter().write(String.format("{\"success\":%b,\"msg\":\"%s\"}", success, msg));
    }
}

關鍵點總結

安全加固清單

• ✅ 後端**驗證權限**：`if (!userService.canDelete(currentUser, id)) return 403;`
• ✅ **CSRF Token**：表單加 `` (Spring Security) 或自行實作
• ✅ **軟刪除**：`UPDATE category SET deleted=1 WHERE id=?` 而非物理 `DELETE`，保留審計軌跡
• ✅ **級聯檢查**：刪除前檢查外鍵關聯，避免孤兒資料

掌握「迴圈變數 `${category.id}` → URL 參數/隱藏欄位/data-* 屬性 → 後端 `request.getParameter("id")`」這條資料流，即可實現列表刪除功能。