SSH 框架整合 jQuery AJAX 實現查詢功能：JSON 解析與表格渲染完整流程

架構概覽

前端 (jQuery AJAX) 
    → Controller (Struts2 Action / Spring MVC)
    → Service (Spring Bean)
    → DAO (Hibernate / MyBatis)
    → Database
    → 返回 List<Entity> → JSON → 前端渲染 Table

後端實作

Struts2 Action 返回 JSON

// struts.xml
<package name="json" extends="json-default">
    <action name="queryUsers" class="userAction" method="query">
        <result type="json">
            <param name="root">userList</param>
        </result>
    </action>
</package>

// UserAction.java
public class UserAction extends ActionSupport {
    private List<User> userList;
    private UserService userService;
    private String queryName; // 查詢條件
    
    public String query() {
        userList = userService.findByName(queryName);
        return SUCCESS;
    }
    // getter/setter
}

Spring MVC 方式 (更現代)

@RestController
@RequestMapping("/api/users")
public class UserController {
    @Autowired UserService userService;
    
    @GetMapping
    public List<User> query(@RequestParam(required=false) String name) {
        return userService.findByName(name);
    }
}

前端 jQuery AJAX 完整代碼

<table id="userTable" class="table table-striped">
    <thead>
        <tr><th>ID</th><th>姓名</th><th>郵箱</th><th>操作</th></tr>
    </thead>
    <tbody></tbody>
</table>

<script>
function loadUsers(name) {
    $.ajax({
        url: '${pageContext.request.contextPath}/api/users', // 或 /queryUsers.action
        type: 'GET',
        data: { name: name || '' },
        dataType: 'json',
        success: function(users) {
            renderTable(users);
        },
        error: function(xhr) {
            alert('查詢失敗: ' + xhr.responseText);
        }
    });
}

function renderTable(users) {
    var $tbody = $('#userTable tbody').empty();
    if (!users || users.length === 0) {
        $tbody.append('<tr><td colspan="4" class="text-center">無資料</td></tr>');
        return;
    }
    $.each(users, function(i, user) {
        var row = '<tr>'
            + '<td>' + user.id + '</td>'
            + '<td>' + (user.name || '') + '</td>'
            + '<td>' + (user.email || '') + '</td>'
            + '<td><button class="btn btn-sm btn-primary" onclick="edit(' + user.id + ')">編輯</button></td>'
            + '</tr>';
        $tbody.append(row);
    });
}

// 綁定查詢按鈕
$('#btnSearch').click(function() {
    loadUsers($('#searchName').val());
});

// 頁面載入初始查詢
$(function() { loadUsers(); });
</script>

JSON 格式規範

// 後端返回陣列 (Spring MVC @RestController 預設)
[
    {"id":1, "name":"張三", "email":"zhang@example.com"},
    {"id":2, "name":"李四", "email":"li@example.com"}
]

// Struts2 JSON Plugin 預設包裝
{"userList": [{"id":1, "name":"張三", ...}, ...]}

// 前端需對應調整：data.userList 或直接 data

進階：分頁與排序

// 前端傳遞分頁參數
data: { 
    name: name, 
    page: currentPage, 
    rows: pageSize,
    sort: sortField,
    order: sortOrder
}

// 後端返回分頁物件
{
    "total": 100,
    "rows": [...],
    "page": 1,
    "pageSize": 10
}

常見問題排查