Spring MVC中實現JSP彈窗確認刪除的完整流程

從前端確認到後端執行：基於Spring MVC的刪除操作最佳實踐

在Spring MVC項目中，實現「點擊刪除 → 彈窗確認 → 執行刪除」的標準流程，包含前端JavaScript確認框、Controller接收請求、Service事務處理、DAO數據操作四個層面。

方案一：傳統同步提交（表單+JS確認）

JSP頁面

<c:forEach items="${userList}" var="user">
    <tr>
        <td>${user.name}</td>
        <td>
            <form action="${pageContext.request.contextPath}/user/delete" method="post" onsubmit="return confirmDelete()">
                <input type="hidden" name="id" value="${user.id}" />
                <button type="submit" class="btn btn-danger">刪除</button>
            </form>
        </td>
    </tr>
</c:forEach>

<script>
function confirmDelete() {
    return confirm("確定要刪除該記錄嗎？此操作不可恢復！");
}
</script>

Controller

@Controller
@RequestMapping("/user")
public class UserController {
    @Autowired private UserService userService;

    @RequestMapping(value = "/delete", method = RequestMethod.POST)
    public String delete(@RequestParam Long id, RedirectAttributes attrs) {
        try {
            userService.deleteById(id);
            attrs.addFlashAttribute("msg", "刪除成功");
        } catch (Exception e) {
            attrs.addFlashAttribute("msg", "刪除失敗：" + e.getMessage());
        }
        return "redirect:/user/list";
    }
}

方案二：AJAX異步刪除（無刷新體驗更佳）

JSP + jQuery

<button class="btn-delete" data-id="${user.id}">刪除</button>

<script>
$(document).on('click', '.btn-delete', function() {
    var id = $(this).data('id');
    if (confirm('確定刪除？')) {
        $.post('${pageContext.request.contextPath}/user/delete', {id: id}, function(resp) {
            if (resp.success) {
                alert('刪除成功');
                location.reload(); // 或移除對應DOM行
            } else {
                alert('失敗：' + resp.msg);
            }
        }, 'json');
    }
});
</script>

Controller返回JSON

@ResponseBody
@RequestMapping(value = "/delete", method = RequestMethod.POST)
public Map deleteAjax(@RequestParam Long id) {
    Map result = new HashMap<>();
    try {
        userService.deleteById(id);
        result.put("success", true);
    } catch (Exception e) {
        result.put("success", false);
        result.put("msg", e.getMessage());
    }
    return result;
}

Service層事務保障

@Service
@Transactional
public class UserServiceImpl implements UserService {
    @Autowired private UserDao userDao;

    @Override
    public void deleteById(Long id) {
        // 業務校驗：如檢查關聯訂單、權限等
        userDao.delete(id);
    }
}

安全增強：防止CSRF與誤操作

• 表單添加<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />（Spring Security）。
• 關鍵刪除操作建議雙重確認：彈窗+二次密碼驗證。
• 軟刪除：UPDATE SET deleted=1 WHERE id=?，保留數據可恢復。