在現代Web開發中，使用Ajax技術來實現動態更新頁面內容已經成為一種常見的做法。通常來說，我們會使用Ajax來請求后端接口，然后獲取數據，再將數據渲染到頁面中的某個特定模塊中。然而，有時候我們需要同時更新多個不同的模塊，這就需要我們使用一些特定的技巧來實現。

一種常見的情況是，我們希望在用戶進行某個操作后，同時更新頁面中的多個模塊，以提供更好的用戶體驗。舉個例子，假設我們正在開發一個在線商城的購物車頁面。當用戶點擊“加入購物車”按鈕時，我們希望能夠更新購物車中的商品數量以及頁面頂部的購物車圖標上的數量。

$.ajax({
url: "/api/add-to-cart",
method: "POST",
data: {
productId: 123
},
success: function(response) {
// 更新購物車數量
$(".cart-count").text(response.cartCount);
// 更新頂部購物車圖標上的數量
$(".cart-icon .count").text(response.cartCount);
},
error: function(error) {
console.log(error);
}
});

在上面的代碼片段中，我們使用了jQuery的Ajax方法來發送POST請求到后端的`/api/add-to-cart`接口。當請求成功時，我們分別通過選擇器找到購物車數量和購物車圖標上的數量，并更新它們的文本內容為從后端返回的`response.cartCount`。

除了在用戶交互時同時更新多個模塊，我們還可以使用Ajax來定時更新頁面中的多個模塊，以展示最新的數據。例如，我們正在開發一個在線聊天應用程序，并希望能夠實時顯示用戶的新消息數量和最近的聊天記錄。

function updateChatModules() {
$.ajax({
url: "/api/get-new-messages",
method: "GET",
success: function(response) {
// 更新新消息數量
$(".new-message-count").text(response.newMessageCount);
// 更新最近的聊天記錄
$(".recent-chat").html(response.recentChat);
},
error: function(error) {
console.log(error);
}
});
}
// 每隔5秒更新一次
setInterval(updateChatModules, 5000);

在上面的例子中，我們定義了一個名為`updateChatModules`的函數，并使用`setInterval`方法定時每隔5秒調用一次該函數。該函數內部的Ajax請求會從后端的`/api/get-new-messages`接口獲取最新的消息數量和聊天記錄，并分別更新頁面中的`new-message-count`和`recent-chat`模塊。

通過以上的例子，我們可以看到，在使用Ajax同時更新多個模塊時，我們需要使用合適的選擇器來選中各個模塊，并在請求成功的回調函數中分別更新這些模塊的內容。此外，我們還可以使用定時任務來實現定時的更新。

總結來說，Ajax能夠很方便地實現頁面中多個模塊的動態更新，從而提供更好的用戶體驗。無論是在用戶交互時還是定時更新，我們只需要使用合適的選擇器和適當的回調函數，就可以同時更新多個模塊的內容。希望以上的例子和解釋能夠幫助你更好地理解和應用Ajax技術。