jQuery 表單提交後獲取 Servlet 返回數據的正確姿勢

問題現狀

使用 $("#loginForm").submit(...) 進行表單驗證並提交，Servlet 返回 boolean 值，前端需獲取該值決定後續邏輯。

誤區：原生 submit 無法直接獲取響應

form.submit() 會導致頁面跳轉/刷新，無法在當前頁面通過 JavaScript 讀取響應體。

解決方案：改用 AJAX 提交

$("#loginForm").submit(function(e) {
    e.preventDefault(); // 阻止默認提交
    
    // 驗證邏輯...
    var bool = true;
    $(".input").each(function() {
        if (!invokeValidateFunction($(this).attr("name"))) bool = false;
    });
    if (!bool) return false;
    
    // AJAX 提交
    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        data: $(this).serialize(),
        dataType: 'json', // 假設 Servlet 返回 JSON: {"success": true}
        success: function(resp) {
            if (resp.success) {
                window.location.href = "/home"; // 登錄成功跳轉
            } else {
                $("#msg").text("用戶名或密碼錯誤");
            }
        },
        error: function() {
            $("#msg").text("網絡錯誤，請重試");
        }
    });
});

Servlet 端返回 JSON 示例

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) {
        resp.setContentType("application/json;charset=UTF-8");
        boolean ok = authenticate(req.getParameter("username"), req.getParameter("password"));
        PrintWriter out = resp.getWriter();
        out.write("{\"success\":" + ok + "}");
        out.flush();
    }
}

替代方案：隱藏 iframe 提交（不推薦）

若必須保留傳統 submit，可將 form.target 指向隱藏 iframe，在 iframe.onload 中讀取 iframe.contentWindow.document.body.innerText 解析結果，但體驗差且易出跨域問題。

最佳實踐總結

• 前後端分離模式下，統一使用 AJAX + JSON 交互。
• 表單驗證通過後 e.preventDefault() 阻止默認行為。
• Servlet 設置 Content-Type: application/json 並輸出結構化數據。
• 前端 success 回調中根據業務碼處理跳轉或提示。

改用 AJAX 異步提交，即可在不刷新頁面的情況下獲取 Servlet 返回的 boolean 結果，並靈活控制前端流程。