JavaScript調用Java方法傳參詳解：AJAX橋接前後端數據交互

JavaScript運行在瀏覽器（客戶端），Java運行在服務器（服務端），兩者無法直接共享變量或調用方法。必須通過HTTP請求（AJAX/Fetch）傳遞數據。本文詳解標準交互模式。

核心誤區

❌ 以為JS變量能直接被JSP/Java代碼讀取（如圖中試圖將JS `index` 直接用於Java代碼）。

正確架構：AJAX請求響應模式

// 前端 JS (jQuery AJAX 示例)
function deleteUser(index, name) {
    $.ajax({
        url: 'DeleteUserServlet', // 或 .jsp/.do 等後端接口
        type: 'POST',
        data: { id: index, name: name }, // 參數自動編碼為 application/x-www-form-urlencoded
        dataType: 'json', // 預期響應格式
        success: function(response) {
            alert('服務器返回: ' + response.message);
            // 根據響應更新頁面
        },
        error: function(xhr, status, error) {
            alert('請求失敗: ' + error);
        }
    });
}

// 後端 Java (Servlet 示例)
@WebServlet("/DeleteUserServlet")
public class DeleteUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1. 獲取參數
        String idStr = request.getParameter("id");
        String name = request.getParameter("name");
        
        // 2. 業務邏輯
        boolean success = userService.deleteUser(Integer.parseInt(idStr));
        
        // 3. 構建響應
        response.setContentType("application/json;charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.write("{\"success\":" + success + ", \"message\":\"" + (success ? "刪除成功" : "刪除失敗") + "\"}");
        out.flush();
    }
}

關鍵要點

1. 數據序列化：JS對象 → URL參數 / JSON字符串 → HTTP Body。
2. 參數接收：`request.getParameter()`獲取表單/URL參數；`request.getInputStream()`讀取JSON Body（需配合Jackson/Gson解析）。
3. 響應格式：統一用JSON，前端`dataType: 'json'`自動解析為對象。
4. 編碼統一：前後端均用UTF-8，避免中文亂碼。
5. 異步非阻塞：AJAX不阻塞頁面，回調處理結果。

現代替代方案

• Fetch API：原生Promise風格，更現代。
• Axios：功能豐富的第三方庫，攔截器、自動轉換、取消請求。
• GraphQL：按需查詢，減少過度獲取。
• WebSocket/Server-Sent Events：雙向實時通信場景。

本質：前後端分離，通過HTTP API契約交互，JS負責展示與用戶交互，Java負責業務邏輯與數據持久化。