在現代 Web 開發中，使用 AJAX 技術來加載數據是非常常見的。通過 AJAX，我們可以在不刷新整個頁面的情況下，僅加載需要更新的數據。然而，當我們使用 AJAX 加載數據并跳轉到其他頁面后，返回原頁面時會面臨一些問題。本文將探討如何通過 AJAX 加載數據后，正確并無縫地返回原頁面。 假設我們有一個新聞網站，用戶在首頁上可以看到最新的新聞列表。當用戶點擊其中一篇新聞時，我們希望通過 AJAX 加載該新聞的詳細內容，并保持用戶在其他頁面瀏覽時可以隨時返回該新聞列表。以下是一個簡單的示例代碼：

// 加載新聞列表
function loadNewsList() {
// 使用 AJAX 加載數據
$.ajax({
url: "/news",
method: "GET",
success: function(response) {
// 將數據渲染到頁面
$("#news-list").html(response);
}
});
}
// 加載新聞詳情
function loadNewsDetail(newsId) {
// 使用 AJAX 加載數據
$.ajax({
url: "/news/" + newsId,
method: "GET",
success: function(response) {
// 將數據渲染到頁面
$("#news-detail").html(response);
}
});
}

如上所示，我們使用了 jQuery 的 AJAX 方法來加載新聞列表和新聞詳情。loadNewsList 函數用于加載新聞列表，loadNewsDetail 函數用于加載新聞詳情。 假設用戶在首頁上點擊了一篇新聞，通過 AJAX 加載了新聞詳情，并成功跳轉到新聞詳情頁。此時，用戶可能進行瀏覽和交互操作，如評論、收藏等。如果用戶希望返回到新聞列表頁，我們需要確保用戶能夠回到之前的狀態，即保留加載的新聞詳情和其它操作。 一種常見的解決方案是在加載新聞詳情頁時，記錄用戶的操作狀態，比如通過 URL 參數傳遞當前新聞的 ID。當用戶返回到新聞列表時，我們再根據該參數重新加載該新聞的詳情。以下是修改后的示例代碼：

// 加載新聞詳情
function loadNewsDetail(newsId) {
// 使用 AJAX 加載數據
$.ajax({
url: "/news/" + newsId,
method: "GET",
success: function(response) {
// 將數據渲染到頁面
$("#news-detail").html(response);
// 記錄當前新聞的 ID
history.replaceState(null, null, "/news/detail?newsId=" + newsId);
}
});
}
// 返回新聞列表
function returnToNewsList() {
// 獲取當前新聞的 ID
var newsId = getUrlParam("newsId");
// 使用 AJAX 加載數據
$.ajax({
url: "/news",
method: "GET",
success: function(response) {
// 將數據渲染到頁面
$("#news-list").html(response);
// 如果新聞 ID 存在，則再次加載該新聞的詳情
if (newsId) {
loadNewsDetail(newsId);
}
}
});
}
// 從 URL 中獲取參數
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}

如上所示，我們在加載新聞詳情時，使用 history.replaceState 方法將當前新聞的 ID 記錄到 URL 中。當用戶返回到新聞列表時，我們通過 getUrlParam 函數獲取 URL 中的參數，然后根據參數重新加載新聞詳情。 通過以上方式，我們成功地解決了通過 AJAX 加載數據后，在返回原頁面時的問題。用戶可以無縫地回到之前的狀態，繼續瀏覽新聞列表，并重新加載之前操作的新聞詳情。 總結起來，當我們使用 AJAX 加載數據并跳轉到其他頁面后，正確處理返回操作是非常重要的。通過記錄操作狀態并重新加載相關數據，我們可以保證用戶在返回原頁面后能夠無縫地繼續之前的瀏覽和交互操作。以上代碼示例僅為簡化版本，實際應用中可能需要根據具體需求作出相應的調整。