JSP 中 JavaScript 呼叫 Java 類別方法的正確姿勢

問題根因

原始碼在 JSP 中直接撰寫 test test = new test; 並呼叫 test.add()，但這段程式碼缺少 <script> 標籤包裹，且混淆了伺服端 Java 與客戶端 JavaScript 的執行環境：

• JSP 執行於伺服器，產生 HTML/JS 回傳瀏覽器。
• JavaScript 執行於瀏覽器，無法直接實例化 Java 類別。

正確架構：AJAX 前後端分離

1. 後端：Servlet / Controller 處理註冊邏輯

// RegisterServlet.java
@WebServlet("/register")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        
        // 呼叫 Service/DAO 寫入資料庫
        boolean ok = UserService.register(username, password);
        
        resp.setContentType("application/json;charset=UTF-8");
        resp.getWriter().write("{\"success\":" + ok + "}");
    }
}

2. 前端：JSP 頁面僅負責表單與 AJAX

<form id="regForm">
    <input name="username" id="username" required />
    <input name="password" type="password" id="password" required />
    <button type="submit">註冊</button>
</form>

<script>
document.getElementById('regForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 防止表單傳統提交跳轉
    
    const formData = new FormData(this);
    fetch('register', { method: 'POST', body: formData })
        .then(r => r.json())
        .then(data => {
            if (data.success) alert('註冊成功！');
            else alert('註冊失敗，請重試');
        })
        .catch(err => console.error(err));
});
</script>

關鍵觀念釐清

常見錯誤與修正

• ❌ 在 <script> 內寫 Java 語法（test t = new test();）→ 瀏覽器報錯 Uncaught SyntaxError。
• ✅ JSP 只輸出資料給 JS：const userId = '${user.id}';（EL 表達式）。
• ❌ 表單 onclick="add()" 未阻止預設提交 → 頁面跳轉導致 AJAX 中斷。
• ✅ 使用 e.preventDefault() 或 return false。

進階建議

• 採用 Spring Boot / Jakarta EE 框架簡化 Controller 撰寫。
• 前端引入 Vue / React 管理狀態，完全脫離 JSP 模板。
• 密碼務必 BCrypt 雜湊 儲存，前端傳輸使用 HTTPS。

總結

JSP 不是「寫 Java 給瀏覽器跑」的工具。正確做法是：JSP 輸出靜態頁面 → JavaScript 發 AJAX → Servlet 處理業務與資料庫 → 回傳 JSON。釐清前後端職責，是 Web 開發入門最關鍵的一課。