AJAX是一種常用于創建交互式網頁的技術，它可以通過異步請求在不需要刷新整個頁面的情況下與服務器進行數據交互。在進行get請求時，有時需要在請求執行完成后進行頁面跳轉。本文將詳細介紹如何使用AJAX完成get請求后的頁面跳轉，并通過舉例說明其用法和效果。

在使用AJAX進行get請求時，我們可以通過在請求成功的回調函數中執行頁面跳轉的操作。以下是一個示例代碼：

$.ajax({
url: 'example.com/data',
type: 'GET',
success: function(response) {
// 執行頁面跳轉的操作
window.location.href = 'example.com/another-page';
}
});

上述代碼中，我們使用jQuery的$.ajax()函數進行get請求。在請求成功后，回調函數中的代碼將執行頁面跳轉操作，將用戶導航到另一個頁面（'example.com/another-page'）。

通過這種方式，我們可以實現在AJAX請求完成后進行頁面跳轉，而不需要刷新整個頁面。這在許多場景下非常有用。以下是幾種常見的使用示例：

示例一：提交表單后跳轉到另一個頁面。

// HTML表單
<form id="myForm" action="example.com/submit" method="GET">
<input type="text" name="username">
<input type="submit" value="Submit">
</form>
// JavaScript代碼
$('#myForm').submit(function(event) {
event.preventDefault(); // 阻止表單默認的提交行為
// 使用AJAX進行get請求
$.ajax({
url: $(this).attr('action'),
type: 'GET',
data: $(this).serialize(),
success: function(response) {
// 執行頁面跳轉的操作
window.location.href = 'example.com/success';
}
});
});

在上面的示例中，當用戶在表單中填寫了用戶名后，點擊提交按鈕會使用AJAX進行get請求。請求成功后，頁面將跳轉到另一個頁面（'example.com/success'），而不需要刷新整個頁面。

示例二：在單頁面應用中更新URL并進行頁面跳轉。

// HTML
<button id="btn1">Page 1</button>
<button id="btn2">Page 2</button>
<div id="content"></div>
// JavaScript
$(document).ready(function() {
// 頁面加載完成后，點擊按鈕進行AJAX請求
$('#btn1').click(function() {
// 使用AJAX進行get請求
$.ajax({
url: 'example.com/page1',
type: 'GET',
success: function(response) {
// 執行頁面跳轉的操作
window.history.pushState(null, null, 'example.com/page1');
$('#content').html(response);
}
});
});
$('#btn2').click(function() {
// 使用AJAX進行get請求
$.ajax({
url: 'example.com/page2',
type: 'GET',
success: function(response) {
// 執行頁面跳轉的操作
window.history.pushState(null, null, 'example.com/page2');
$('#content').html(response);
}
});
});
});

在上述示例中，當用戶點擊按鈕時，使用AJAX進行get請求并更新頁面內容，并使用window.history.pushState()方法更新URL。這樣，用戶可以通過頁面跳轉來瀏覽不同的內容，而不需要刷新整個頁面。

通過以上示例，我們可以看到在AJAX執行完get請求后進行頁面跳轉是非常方便的。它可以實現在不刷新整個頁面的情況下更新內容和導航用戶到不同的頁面。無論是提交表單后跳轉，還是在單頁面應用中更新URL并進行頁面跳轉，這種技術都能提升用戶體驗，使網頁更加動態和交互。