您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計疑難解答

JSP 頁面按鈕點擊調用後台 Java 方法：基於 AJAX 異步請求的正確姿勢

編輯：程式設計疑難解答

常見誤區

初學者常嘗試在 JSP 的 onclick 中直接寫 Java 方法名（如 onclick="mail()"），期望直接調用後台 Controller 方法。這是不可能的，因為 JSP 運行在服務端，生成 HTML 後發送給瀏覽器，瀏覽器只能執行 JavaScript。

正確架構：前端 JS → AJAX → 後台 Controller

1. 後台 Controller（Spring MVC 示例）

@RestController
@RequestMapping("/mail")
public class MailController {

    @PostMapping("/send")
    public ResponseEntity sendMail() {
        // 原有發送郵件業務邏輯
        MailSenderInfo mailInfo = new MailSenderInfo();
        // ... 設置郵件參數 ...
        SimpleMailSender sms = new SimpleMailSender();
        boolean success = sms.sendTextMail(mailInfo);
        return success ? ResponseEntity.ok("發送成功") : ResponseEntity.badRequest().body("發送失敗");
    }
}

2. JSP 頁面：按鈕綁定 JS 函數

<input type="button" value="發送郵件" id="sendMailBtn" />

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    document.getElementById('sendMailBtn').addEventListener('click', function() {
        sendMailAjax();
    });

    function sendMailAjax() {
        axios.post('/mail/send') // 對應後台 @PostMapping("/send")
            .then(response => {
                alert(response.data); // 彈出後台返回信息
            })
            .catch(error => {
                console.error(error);
                alert('請求異常：' + error.message);
            });
    }
</script>

關鍵點解析

環節	說明
請求方式	使用 POST，符合 REST 風格，避免 GET 請求長度限制與安全風險。
異步非阻塞	AJAX (axios/fetch/jQuery.ajax) 不刷新頁面，用戶體驗佳。
URL 映射	前端請求路徑 `/mail/send` 必須與後台 `@RequestMapping` 匹配。
CSRF 防護	生產環境需配合 Spring Security 的 CSRF Token，或在 AJAX 標頭攜帶。
異常處理	前端 `.catch()` 捕獲網絡/業務異常，後台統一異常處理返回友好提示。

替代方案：表單提交（同步）

若不需要異步體驗，可用傳統表單提交：

<form action="/mail/send" method="post">
    <input type="submit" value="發送郵件" />
</form>

缺點：頁面會跳轉/刷新，需在 Controller 返回重定向或視圖。

總結

JSP 按鈕調用後台 Java 方法的標準路徑是：HTML 按鈕 → JavaScript 事件監聽 → AJAX 異步請求 → Spring MVC Controller 方法 → 返回 JSON/文本 → JS 處理響應。切記：瀏覽器無法直接調用服務端 Java 代碼，必須通過 HTTP 請求橋接。