jQuery EasyUI Tree 與 Struts2 JSON 交互失敗？完整排查指南

問題現場

使用 jQuery EasyUI 的 `

$('#navigation_ul').tree({ url: 'meaulAction' });

後端 Struts2 Action 返回 `{"text":"人事部"}`，控制台顯示進入方法且 JSON 正確，但頁面樹形結構不顯示。

常見致命錯誤

1. Content-Type 未正確設置：必須在 Action 中設置 `response.setContentType("application/json;charset=UTF-8")`，或在 `struts.xml` 配置 ``。
2. JSON 格式不符合 EasyUI 要求：EasyUI Tree 要求的節點屬性為 `id`、`text`、`state`（open/closed）、`children` 等。僅返回 `{text:"人事部"}` 缺少 `id` 會導致渲染異常。
3. Struts2 JSON 插件未正確攔截：需確保 `struts2-json-plugin` 版本與核心一致，且 Action 實現 `Serializable` 或提供 getter 方法讓插件序列化屬性。
4. 攔截器棧缺少 jsonWorkflow：在 `struts.xml` 中 `` 或繼承 `json-default` 套件。

正確示例

Action 類

public class MenuAction extends ActionSupport {
    private List<TreeNode> menuData; // 提供 getter

    public String execute() {
        menuData = buildMenu(); // 組裝包含 id、text、children 的樹節點列表
        return SUCCESS;
    }
    // getter...
}

struts.xml

<package name="menu" extends="json-default">
    <action name="menuAction" class="com.example.MenuAction">
        <result type="json">
            <param name="root">menuData</param>
        </result>
    </action>
</package>

前端調用

$('#navigation_ul').tree({
    url: 'menuAction',
    method: 'get',
    onLoadError: function() { alert('樹數據加載失敗'); }
});

調試技巧

• 瀏覽器 Network 面板查看響應：狀態碼 200、Content-Type、JSON 結構。
• 直接在瀏覽器訪問 Action URL，驗證返回純 JSON。
• 後端日誌打印序列化後的字符串，排除轉義問題。

遵循上述規範，EasyUI Tree 與 Struts2 整合即可穩定運行。