Spring MVC 前端 JS 跳轉與後端 Redirect 衝突：執行順序解析

現象

表單提交觸發 JS 函數：

function mySubmitFn() {
    formname.submit(); // 程式碼1：提交表單，後端返回 redirect:A.jsp
    window.location.href = 'B.jsp'; // 程式碼2：前端強制跳轉 B.jsp
}

實測先執行程式碼2 跳轉 B.jsp，後端 redirect A.jsp 失效。

原因

1. form.submit() 是**非同步**發送請求，瀏覽器**不會等待**回應就繼續執行下一行 JS。
2. 瀏覽器收到後端 302 Redirect 時，若當前頁面已因 window.location.href 導航離開，重導向會被忽略或在新頁面中無效。
3. 兩者屬於**競態條件**，勝負取決於網路延遲與瀏覽器實作，不可預期。

正確模式

方案一：純前端跳轉（後端返回 JSON）

function mySubmitFn() {
    fetch('/submit', { method: 'POST', body: new FormData(formname) })
        .then(r => r.json())
        .then(data => {
            if (data.success) window.location.href = data.redirectUrl; // 由後端決定
        });
}

方案二：純後端跳轉（表單 action 直接指向後端）

<form action="/submit" method="post"> ... </form>
// 後端 Controller
@PostMapping("/submit")
public String submit(...) {
    return "redirect:/A.jsp"; // 或 redirect:/success
}

方案三：AJAX 提交 + 後端返回 URL，前端統一導航

$.post("/submit", $(form).serialize(), function(resp) {
    if (resp.url) window.location.href = resp.url;
});

核心原則

• **不要同時**在前端與後端做導航跳轉，二選一。
• 現代開發傾向 **AJAX + JSON** 由前端控制跳轉，體驗更可控。
• 若保留傳統表單提交，移除 JS 中的 window.location.href，完全交給後端 RedirectView。