JavaScript 前端將變量值傳遞給後端 Action 的多種方案

場景還原

前端有一全局變量 cha = 10，需在 chongChouQu() 中攜帶此值跳轉至 suiJi.action，後端 Struts2 Action 含 private Integer cha 及 Getter/Setter。

var cha = 10;
function chongChouQu() {
  window.location = "suiJi.action"; // 如何帶上 cha？
}

三種主流傳參方式

1. URL 參數（GET）— 最簡單

function chongChouQu() {
  window.location = "suiJi.action?cha=" + encodeURIComponent(cha);
}

後端自動注入：private Integer cha; + getCha()/setCha()

2. 表單隱藏域（POST）— 避免 URL 長度限制

function chongChouQu() {
  const form = document.createElement('form');
  form.method = 'POST';
  form.action = 'suiJi.action';
  const input = document.createElement('input');
  input.type = 'hidden';
  input.name = 'cha';
  input.value = cha;
  form.appendChild(input);
  document.body.appendChild(form);
  form.submit();
}

3. AJAX + 重定向 — 體驗最佳

function chongChouQu() {
  $.post('suiJi.action', { cha: cha }, function(res) {
    if (res.success) window.location = res.redirectUrl;
  }, 'json');
}

後端返回 JSON：{success: true, redirectUrl: 'nextPage.action'}

Struts2 參數接收原理

• 攔截器 params 會根據請求參數名 cha 調用 setCha(Integer)
• 類型轉換器自動將 String → Integer
• 若參數缺失或格式錯誤，cha 保持 null，可通過 validation 攔截器校驗

常見坑點

最佳實踐建議

1. ✅ 簡單跳轉用 URL 參數，語義清晰、可收藏、可分享
2. ✅ 敏感/大數據用 POST 表單 或 AJAX
3. ✅ 統一異常處理：global-exception-mappings 導向友好錯誤頁
4. ✅ 參數校驗：@Validate 或 XML 驗證，避免髒數據入庫

總結

JavaScript 向後端傳值本質是「構造 HTTP 請求參數」。掌握 GET QueryString、POST Form、AJAX JSON 三種載體，配合 Struts2 params 攔截器自動裝箱特性，即可靈活應對各種業務場景。