AJAX 請求返回 List 數據，前端 JavaScript 遍歷渲染完整指南

場景描述

前端通過 jQuery AJAX 向後端發送請求，後端返回 List 集合（通常序列化為 JSON 數組），前端需解析並動態渲染到頁面。

後端代碼優化（Struts2 示例）

public String queryComplete() {
    completeList = completeService.queryComplete();
    // 建議使用 JSON 庫（如 Jackson、Gson、Fastjson）序列化，而非直接 print List
    // 此處為演示，直接輸出 JSON 字符串
    HttpServletResponse response = ServletActionContext.getResponse();
    response.setContentType("application/json;charset=utf-8");
    String json = JSON.toJSONString(completeList); // 推薦 Fastjson
    response.getWriter().write(json);
    return NONE;
}

前端遍歷核心代碼

$.ajax({
    url: '<%=path%>/complete!queryComplete.action',
    type: 'post',
    dataType: 'json', // 關鍵：自動解析為 JS 對象/數組
    success: function(data) {
        console.log("接收到數據:", data); // data 為數組 [{id:1,name:'A'},{id:2,name:'B'}...]
        
        // 方式 1：jQuery each 遍歷（推薦）
        $.each(data, function(index, item) {
            $('#resultContainer').append(
                '<div>' + item.id + ' - ' + item.name + '</div>'
            );
        });
        
        // 方式 2：原生 forEach (ES5+)
        data.forEach(function(item) {
            // 構建 DOM 元素...
        });
        
        // 方式 3：for...of 循環 (ES6)
        for (const item of data) {
            // 模板字符串構建 HTML
            const html = `\<div\>\${item.id} - \${item.name}\</div\>`;
            $('#resultContainer').append(html);
        }
    },
    error: function(xhr) {
        alert("請求異常：" + xhr.status);
    }
});

關鍵注意點

• dataType: 'json'：確保 jQuery 自動將響應文本解析為 JavaScript 數組/對象，無需手動 JSON.parse()。
• 後端 Content-Type：必須設置為 application/json，否則可能解析失敗。
• 數據結構確認：控制台 console.log(data) 觀察結構，確認是數組還是包含 list 屬性的對象（如 {list: [...]}），若為後者需用 data.list 遍歷。
• XSS 防護：拼接 HTML 時對動態內容進行義，或使用 textContent / 模板引擎。

完整渲染示例：表格動態生成

success: function(data) {
    let tbody = $('#dataTable tbody');
    tbody.empty();
    $.each(data, function(i, item) {
        let row = `\<tr\>
            \<td\>\${i+1}\</td\>
            \<td\>\${item.name}\</td\>
            \<td\>\${item.value}\</td\>
        \</tr\>`;
        tbody.append(row);
    });
}

總結

後端返回標準 JSON 數組，前端設置 dataType: 'json'，使用 $.each 或現代 JS 循環遍歷渲染，是處理 AJAX List 數據的標準流程。