AJAX 實現單次請求更新多個頁面區域的技巧

核心原理

AJAX 本質是「發起請求 -> 獲取數據 -> 更新 DOM」。一次請求完全可以更新任意多個 DOM 節點，關鍵在於服務端返回的數據結構包含多個區域所需內容，前端解析後分發到對應位置。

實現模式

模式一：返回 JSON 對象，鍵對應容器 ID

後端 (Java/PHP/Node.js 等)：

// 返回示例
{
    "userInfo": "<div>用戶名: 張三 <span class='vip'>VIP</span></div>",
    "cartCount": "5",
    "notifyList": "<ul><li>新消息1</li><li>新消息2</li></ul>"
}

前端 (jQuery)：

$.post('/api/refresh', {userId: 123}, function(res) {
    // 直接更新多個區域
    $('#user-info-container').html(res.userInfo);
    $('#cart-badge').text(res.cartCount);
    $('#notify-dropdown').html(res.notifyList);
}, 'json');

模式二：返回 HTML 片段，前端按選擇器分割（不推薦，耦合度高）

約定返回字符串中用特殊分隔符分割，或約定順序。

模式三：服務端渲染多個 Partial View，前端替換對應區塊（ASP.NET MVC/Razor Pages 常用）

// Controller
public ActionResult RefreshParts() {
    return Json(new {
        Part1 = RenderPartialViewToString("_UserInfo", model),
        Part2 = RenderPartialViewToString("_CartSummary", model),
        Part3 = RenderPartialViewToString("_NotifyList", model)
    }, JsonRequestBehavior.AllowGet);
}

最佳實踐建議

• 數據與視圖分離：優先讓後端返回純數據，前端使用模板引擎渲染，利於維護和緩存。
• 統一入口：封裝通用的 `refreshRegions(regionConfigs)` 函數，配置對象包含 `{url, params, targetSelector, templateFn}`。
• 錯誤處理：單個區域更新失敗不應阻塞其他區域，使用 `Promise.allSettled` 或逐個 `try-catch`。
• 性能：若區域數很多且頻繁刷新，考慮 WebSocket/SSE 推送增量更新，或合併為單一大區域刷新。

常見誤區澄清

「不知道只能刷新一個區域是啥意思」—— 原提問者可能誤以為 `$.ajax` 回調只能操作一個元素。實際上回調裡的 `this`/`$` 可任意選擇多個選擇器操作 DOM。