在現代的網頁開發中，使用Ajax技術實現頁面無刷新更新已經變得異常普遍。Ajax的一個常見應用場景就是在后臺請求數據并在頁面上進行展示。然而，在實際開發過程中，我們有時還需要在Ajax請求成功返回數據后跳轉到另一個頁面。本文將介紹如何在Ajax請求成功返回后跳轉頁面，并通過舉例說明來幫助讀者更好地理解和實踐。
通常情況下，當我們使用Ajax發送一個請求并成功獲取到數據后，我們希望能夠跳轉到另一個頁面以進行進一步的操作或顯示相關內容。在這種情況下，我們可以在Ajax的回調函數中添加跳轉頁面的代碼。
例如，我們有一個網頁中的一個按鈕，點擊這個按鈕后會觸發一個Ajax請求，獲取服務器上的數據。當數據成功返回后，我們希望自動跳轉到一個新的頁面以展示這些數據。下面是一個簡單的例子：

<button onclick="getData()">點擊獲取數據</button>
<script>
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 數據獲取成功，跳轉頁面
window.location.href = "new-page.html";
}
};
xhttp.open("GET", "data-url", true);
xhttp.send();
}
</script>

在上面的例子中，我們定義了一個名為getData的函數，該函數觸發了一個Ajax請求。在請求返回后的回調函數中，我們通過window.location.href將頁面跳轉到了new-page.html。
更進一步地，我們也可以根據不同的返回結果跳轉到不同的頁面。例如，考慮一個簡單的登錄表單，在用戶登錄成功后，我們希望跳轉到用戶的個人主頁，而在登錄失敗后，我們希望跳轉回登錄頁面并顯示錯誤信息。

<form onsubmit="login(event)">
<input type="text" name="username" placeholder="用戶名">
<input type="password" name="password" placeholder="密碼">
<button type="submit">登錄</button>
</form>
<script>
function login(event) {
event.preventDefault(); // 阻止表單的默認提交行為
var formData = new FormData(event.target);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
// 登錄成功，跳轉到個人主頁
window.location.href = "profile.html";
} else {
// 登錄失敗，跳轉回登錄頁面并顯示錯誤信息
// 在這里可以通過解析返回的數據來獲取錯誤信息
window.location.href = "login.html?error=true";
}
}
};
xhttp.open("POST", "login-url", true);
xhttp.send(formData);
}
</script>

在上述示例中，我們在登錄表單的提交事件中調用了一個名為login的函數。在該函數中，我們通過阻止表單的默認提交行為，使用Ajax技術發送登錄請求。在請求返回后的回調函數中，我們根據請求的狀態碼來判斷登錄的成功與否，并相應地進行跳轉。
總結起來，通過以上的例子，我們可以了解到在Ajax請求成功返回后進行頁面跳轉的方法。無論是簡單的數據獲取還是復雜的用戶登錄驗證，我們都可以根據返回結果來決定跳轉到不同的頁面。這種技術不僅提升了用戶體驗，還可以為網頁開發帶來更多的可能性。希望本文對讀者理解和實踐Ajax頁面跳轉有所幫助。