HTML5 前端與 Struts 2 後端數據交互入門：從表單提交到 AJAX 整合

剛接觸前後端分離開發，只有 JSP 經驗，面對 HTML5 + Struts 2 的查詢需求感到無從下手？核心其實只有三步：前端發請求 → Struts Action 處理 → 返回 JSON。

最小可行流程

1. 前端頁面 (HTML5 + jQuery)

<input type="text" id="keyword" placeholder="查詢關鍵字">
<button id="searchBtn">查詢</button>
<div id="result"></div>

<script>
$('#searchBtn').click(function() {
  $.post('searchAction', { keyword: $('#keyword').val() }, function(data) {
    // data 為 JSON 陣列或物件
    $('#result').html(JSON.stringify(data)); // 實際專案用模板渲染
  }, 'json');
});
</script>

2. Struts 2 Action

public class SearchAction extends ActionSupport {
    private String keyword;
    private List<ResultDTO> results; // getter 必須有

    public String execute() {
        // 呼叫 Service/DAO 查詢資料庫
        results = searchService.findByKeyword(keyword);
        return SUCCESS;
    }
    // getter/setter...
}

3. struts.xml 配置 JSON 結果類型

<package name="default" extends="struts-default, json-default">
  <action name="searchAction" class="com.example.SearchAction">
    <result type="json">
      <param name="root">results</param> <!-- 序列化 results 屬性 -->
    </result>
  </action>
</package>

需引入 struts2-json-plugin.jar。

進階關鍵點

• 參數自動裝配：前端 keyword 自動注入 Action 同名屬性。
• 日期/複雜類型轉換：自訂 TypeConverter。
• 驗證：validate() 方法或註解驗證。
• 異常處理：全局 exception 結果映射友好錯誤頁。
• 安全：CSRF Token、XSS 防護、SQL 注入防護 (MyBatis/Hibernate 參數化)。

學習資源關鍵字

Google 搜尋：struts2 json plugin tutorial、struts2 crud example、html5 jquery ajax form submit。官方文件與 GitHub 範例專案最直接。

HTML5 與否不影響後端交互本質，HTTP 請求/回應 + JSON 序列化 才是核心協定。